Automatische Neuskalierung von Bildern in ein kleineres Vorschaufenster auf Webseite

Question

Ich versuche, die in meinen Rasterfenstern auf meiner Webseite angezeigten Bilder http://foottherapy.tumblr.com/ als skalierte Versionen anzuzeigen (dh das ganze Bild wird nur für das Rasterfenster skaliert) statt diese partielle Darstellung. Ich habe versucht, zu ändern, die Attribute zu heigh: 100% oder Breite: 100% für diese Blöcke, aber es hat nicht funktioniert. Jede Hilfe wird wirklich geschätzt.

Answer 1

ja. passt entweder die div-größe an die thumbnail an, da ihr css background-image verwendet, um sie zu laden, oder lade sie in ein -tag, das sich automatisch an die größe des bildes auf dem bildschirm anpasst. alternativ können Sie < img height='200' width='200' /> verwenden, um die Skalierung durch den Browser zu erzwingen. Bei der Browser-Skalierung ist die Qualität unter Umständen nicht so gut. Daher sollten Sie sie in der Regel mit einer Software oder einem Code vorskalieren, der eine hochwertige Skalierung bietet und die Bildverhältnisse berücksichtigt.

Eine weitere Alternative in CSS ist die Verwendung der neuen css3-Option: background-size: 200px 50px, aber das ist nicht wirklich empfehlenswert, wenn Sie dies einem breiten Publikum zeigen möchten.

Answer 2

Verwenden Sie folgende: <img src='...' style='width:200px;'/> (200px - ist ein Beispiel, verwenden Sie, was Sie für Ihre Seite benötigen). Sie können die Höhe auch durch style = 'height: 100px' begrenzen. Wenn Sie beides verwenden, kann es ein Bild verzerren (d. H. Nicht beides, wenn Sie das Verhältnis beibehalten möchten).