UIWebView juste une image qui devrait convenir à l'ensemble de la vue

Donc la question que je vais avoir maintenant est avec UIWebViews l'affichage d'une seule image.
Ce que j'aimerais c'est que l'image soit réduite si elle n'est pas le lieu, et de garder la taille d'origine si pas.
Donc, voici comment je le fais (dans un UIViewController):

- (void)viewDidLoad {
    [super viewDidLoad];
    UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)];
    NSString *path =[[NSBundle mainBundle] bundlePath];
    NSURL *baseUrl =[NSURL fileURLWithPath:path];

    NSString *html = [NSString stringWithFormat:@"<html><head>"
//THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE
        "<script>document.ontouchstart = function(event) { event.preventDefault();  }</script>"
        "</head><body style=\"text-align:center;margin:0;padding:0\">"
        "<img src=\"banner.gif\" />"
        "</body>"
        "</html>"];             

    webView.scalesPageToFit = YES;
    [webView loadHTMLString:html baseURL:baseUrl]; 
    [self.view addSubview:webView];
    [webView release];
}

Cette culture de l'image et rend la webview de défilement, ce qui n'est pas le comportement souhaité.

J'ai donc commencé à essayer avec un peu de CSS int la balise d'image :

"<img style=\"width:100%\" src=\"banner.gif\" />"

"<img style=\"max-width:100%\" src=\"banner.gif\" />"

Je ne sais pas pourquoi, mais à 100% ne semble pas être la largeur de la UIView, il est vraiment petit ! (la source de l'image dans la vue est plus grand que 320px, et voici le résultat 🙂

UIWebView juste une image qui devrait convenir à l'ensemble de la vue

Donc j'ai essayé de paramétrer le corps largeur :

        "</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">"
        "<img style=\"width:100%\" src=\"banner.gif\" />"

Et ce qui n'est simplement prévenir l' "text-align" bien travailler.
J'ai essayé également de supprimer le texte-align, parce que si la largeur s'adapte à la vue, il n'est pas nécessaire, mais ça ne fonctionne toujours pas.
J'ai aussi essayé de définir la taille de l'image à l'affichage de la largeur, mais il ne fonctionne pas sur la rétine des appareils, puis...
J'ai essayé de définir une fenêtre d'affichage de device-width, mais elle ne change pas.

Aucune idée de comment faire cela ?

Ici est un petit exemple avec 3 images que j'aimerais l'ajustement, dans le cas où vous avez le temps de jeter un oeil

OriginalL'auteur Julien | 2011-01-12

Mise à JOUR : j'ai trouvé une meilleure façon de le faire avec du Javascript, pas besoin de définir sizeToFit

NSString *htmlString = [NSString stringWithFormat:
                        @"<html>"
                        "<head>"
                        "<script type=\"text/javascript\" >"
                        "function display(img){"
                        "var imgOrigH = document.getElementById('image').offsetHeight;"
                        "var imgOrigW = document.getElementById('image').offsetWidth;"
                        "var bodyH = window.innerHeight;"
                        "var bodyW = window.innerWidth;"
                        "if((imgOrigW/imgOrigH) > (bodyW/bodyH))"
                        "{"
                        "document.getElementById('image').style.width = bodyW + 'px';"
                        "document.getElementById('image').style.top = (bodyH - document.getElementById('image').offsetHeight)/2  + 'px';"
                        "}"
                        "else"
                        "{"
                        "document.getElementById('image').style.height = bodyH + 'px';"
                        "document.getElementById('image').style.marginLeft = (bodyW - document.getElementById('image').offsetWidth)/2  + 'px';"
                        "}"
                        "}"
                        "</script>"                         
                        "</head>"
                        "<body style=\"margin:0;width:100%;height:100%;\" >"
                        "<img id=\"image\" src=\"%@\" onload=\"display()\" style=\"position:relative\" />"
                        "</body>"
                        "</html>",url
                        ];


[webView loadHTMLString:htmlString baseURL:nil];

Ancienne version (qui ne fonctionne pas bien)

Je n'aime pas répondre à ma propre question, mais je suis tellement excité que j'ai découvert la solution à ce problème !

Donc, fondamentalement, ce que vous avez besoin pour ce faire :

Initialisation de la vue avec ses réel final de l'image souhaitée :
```
webView = [[UIWebView alloc] initWithFrame:_desiredFrame];
```
Ajouter une fenêtre de propriété, et de définir la largeur de l'image de cette propriété (je choisis 1200px de sorte qu'il est plus grand que tous les périphériques possibles, et ne sera pas étirer le contenu deux fois) Le script avec les ontouchstart est juste pour empêcher le défilement de la vue et être approuvés par Apple.
```
NSString *html = [NSString stringWithFormat:@"<html><head>"
"<script>document.ontouchstart = function(event) { event.preventDefault();  }</script>"
"<meta name=\"viewport\" content=\"width=1200\"/>"
"</head>"
"<body style=\"margin:0;padding:0;\">"
"<img style=\"width:1200px\" src=\"%@\" />"
"</body>"
"</html>",imageName];
```
Dire le point de vue de l'échelle du contenu à insérer :
```
webView.scalesPageToFit = YES;
```

Ensuite, vous pouvez charger vos trucs !
Je ne sais pas comment faire si vous avez besoin de redimensionner l'affichage par programmation plus tard, je pourrais avoir à le faire et le poster ici si j'ai trouver comment. Si vous savez, ou avez une meilleure solution, je vous en serais reconnaissant la solution

Salut, j'ai vu que vous travaillez avec des webviews, et je suppose que vous utilisez un récent SDK, 4.2, peut-être? Avez-vous avoir à redimensionner la webview jusqu'à maintenant, et si oui, comment avez-vous fait? J'ai trouvé deux solutions possibles en ligne, qui n'a pas de travail sur la 4.2. Si vous avez des expérience, je vous serais reconnaissant de vous le partager 🙂
En fait je n'ai pas redimensionner la webview après que le contenu est chargé. Je n'aurais probablement recharger la webview dans ce cas. Pouvez-vous partager la 2 solution que vous avez mentionné ? Peut-être que j'ai mal compris votre besoin. Aussi, oui j'utilise le 4.2 SDK (avec rétro-compatibilité)
Version mise à jour est probablement la plus utile de réponse sur StackOverflow à mon humble avis! 🙂
Si vous rencontrez des problèmes avec "invalid conversion speficier" s'évader de la pourcentage de la dupliquer "<body style=\"margin:0;width:100%%;height:100%%;\" >"
J'ai trouvé cela un peu utile, sauf dans mon cas, le code HTML contient également d'importantes sections de texte en dessous de l'image. Comment pourrait-on faire quelque chose comme ça, de sorte que la hauteur serait de prendre soin du texte?

OriginalL'auteur Julien

2

Une belle et la solution la plus simple est de mettre ce code sur votre HTML <head> tag:
```
<meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0" />
```
Ici, vous pouvez définir un niveau de zoom et de largeurs.

OriginalL'auteur SEQOY Development Team

Vous devez vous connecter pour publier un commentaire.