Einstellen proportional Bildbreiten für den Browser-Resize

Question

Wenn ich ein Bild mit einem Stil kombiniert:

<img class="test" src="testimage.jpg" />

img.test { width: 50%;}

Das Bild ändert die Größe auf 50% der Breite des Kastens es sowie Ändern der Größe vertikal enthält, das Bildseitenverhältnis beibehalten wird.

Dies scheint die umschließenden DIV zu verlangen auf eine bestimmte Breite und Höhe Wert eingestellt werden. Aber wenn Sie die umschließenden DIV wollen automatisch, um die Größe wie der Browser gezogen kleiner oder größer ist, wäre dies kein Problem sein?

Answer 1

Ich habe meine Antwort auf Ihre ursprüngliche Frage . Gehen Sie einen Blick und sehen, ob es Dinge aufklärt. Mehr oder weniger, wenn Sie das Bild wollen mit dem Fenster, das Sie , um die Größe kann nicht die DIV auf eine feste Breite und Höhe eingestellt. Die DIV müssen% Breite und Höhe haben auch.

Answer 2

Sie müssen manuell die width und height Eigenschaften angeben, um das Bild zu bekommen, um seine Abmessungen zu halten. Dies wäre nicht allzu schwierig sein, wenn Sie mit serverseitige Codierung (PHP / ASP).

Eine andere Möglichkeit, es zu tun wäre JavaScript zu verwenden, um das Bild dynamisch zu berechnen und ändern.

Answer 3

Nein, so wird das Bild immer noch 50% des div, und wenn der div ist ein Teil der Seite, die nicht egal.

Answer 4

Seine alle Proportionen: Die umschließenden div 2/3 des gesamten Fensters sein könnte, und das Bild wird 1/2 der wil. Alles wird berechnet, bevor seine angezeigt, nur ein paar Zahlknirschens. ; D