Wie mache ich Side-by-Side-Bilder gleich groß (CSS/HTML)?

Zwei Bilder, eines ist 300x400 Pixel (Höhe x Breite), das andere ist 500x600. Wie kann ich sie nebeneinander erscheinen lassen, so skaliert, dass sie die gleiche Höhe auf dem Bildschirm haben und die gesamte Breite der Seite (oder container/div) ausfüllen, ohne das Seitenverhältnis beider Bilder zu ändern?Wie mache ich Side-by-Side-Bilder gleich groß (CSS/HTML)?

Ich möchte eine HTML/CSS-Möglichkeit, dies zu tun - etwas, das auch für mehr als 2 Bilder funktioniert, wenn möglich. Momentan berechne ich manuell die Breite jedes Bildes (Mathe unten).

EDIT:
Ein Beispiel dessen, was ich zu tun habe versucht:

<img src="http://stackoverflow.com/content/img/so/logo.png" 
    width="79%" style="float:left" border=1 /> 
<img src="http://stackoverflow.com/content/img/so/vote-favorite-off.png" 
    width="20%" border=1 />

Gebrauchte Formel unten (oder Versuch und Irrtum) mit 79/20 Split zu kommen. Beachten Sie, dass 79 + 20 < 100 - wenn ich es auf 80/20 festlegen, dann die Bilder aufgrund der Grenze umbrechen. Wie kann ich das tun, ohne etwas berechnen zu müssen? Der Browser sollte das für mich erledigen können.

ah1 = 300 // actual height of image 1 
aw1 = 400 // actual width of image 1 
ah2 = 500 // actual height of image 2 
aw2 = 600 // actual width of image 2 

// need to calculate these: 
dw1 // display width of image 1, expressed as percent 
dw2 // display width of image 2, expressed as percent 
dw1 + dw2 == 100% 

s1 = dw1/aw1 // scale of image 1 (how much it has been shrunk) 
s2 = dw2/aw2 

dh1 = ah1 * s1 // display height of image 1 = its actual height * its scale factor 
dh2 = ah2 * s2 

// need to solve this equality to get equal display heights: 
      dh1 == dh2 
     s1 * ah1 == s2 * ah2 
dw1/aw1 * ah1 == dw2/aw2 * ah2 
dw1/aw1 * ah1 == (1 - dw1)/aw2 * ah2 
dw1 * aw2 * ah1 == (1 - dw1) * aw1 * ah2 
dw1 * aw2 * ah1 == aw1 * ah2 - aw1 * ah2 * dw1 
dw1 * aw2 * ah1 + aw1 * ah2 * dw1 == aw1 * ah2 
dw1 * (aw2 * ah1 + aw1 * ah2) == aw1 * ah2 
dw1 == aw1 * ah2/(aw2 * ah1 + aw1 * ah2) 
    == 400 * 500/(600 * 300 + 400 * 500) 
    == 20/(18 + 20) 
    == 20/38 
    == 52.63% // which ends up as style="width:53%" which isn't quite right...

Quelle

2009-07-23 Dan

warum nicht einfach den Bild HEIGHT Attributwert setzen, ohne die Breite zuzuschreiben?

so: <img height="300" src="path/to/image.png" />

Sie können auch über CSS, gleiche Prinzip erreichen dies: Sie können die Höhe festgelegt und nicht die Breite. Die Reskalierung wird proportional ...

Quelle

2009-07-23 08:36:19 pixeline

Wenn ich die Höhe, obwohl gesetzt, wie werde ich mit beiden Bilder über die volle Breite des Bildschirms einnimmt am Ende? Ich müsste immer noch manuell die richtige Höhe berechnen, so dass die beiden Bilder die gesamte Breite ausfüllen. – Dan

Also bedeutet dies, dass wir die Breite/Höhe-Werte für jedes Bild unabhängig berechnen müssen. Sie können dies entweder auf der Clientseite (javascript) oder auf der Serverseite (zB über php) tun, wenn Sie Ihr Galerie-HTML-Markup ausgeben. Was ist Ihre Wahl? – pixeline

Wenn Sie sie nicht benötigen, um die gleiche Größe skaliert werden (das ganze Bild zeigen) Sie die CSS-Eigenschaft clip

img können {

clip: rect(0 300px 300px 0; 
position: absolute; /* the problem with using clip is that the element has to be absolutely positioned, which isn't always as awkward as it seems, but any content around it will need to be cleared somehow, perhaps with a top-margin? */

)

Quelle

2009-07-23 08:37:52

Das erste Mal habe ich von 'Clip' gehört. Klingt so, als würde es mein Bild beschneiden. Ich hätte gerne die ganzen Bilder mit Original-Seitenverhältnissen angezeigt. – Dan

Es schneidet tatsächlich (oder "schneidet") das Bild;) Ja, ich war mir nicht sicher, ob Sie sie beschnitten haben oder nicht, aber da fast niemand Clip verwendet, dachte ich, ich würde darauf hinweisen als nützliche Eigenschaft. Ich warne Sie, dass die Verwendung von CSS/(X) HTML zum Skalieren von Bildern browserintensiv ist und nicht unbedingt die schmeichelhafteste Art, die Bilder anzuzeigen. Es ist nicht * schlimmer * so, es ist nur eine Kosten für die Methode. –

[cont] ... die Verwendung von 'clip' bedeutet, dass Sie sich nicht um die Originalgrößen kümmern müssen (es sei denn, Sie möchten die kleinsten Bildabmessungen überprüfen und diese als geclippte Größe beibehalten). Für die Verwendung von CSS/XHTML sind einige komplexe Berechnungen erforderlich. Es sei denn, du gehst willkürlich und bleibst bei einer bestimmten Menge von Dimensionen. –

Einstellen der Höhe sollte funktionieren. Denken Sie daran, dass Sie auch relative Werte wie Prozentsätze verwenden können.

<img src="myimage.jpg" height="100%" />

Quelle

2009-07-23 10:29:18

Das funktioniert, außer dass ich die richtige Höhe anpassen oder berechnen muss, damit die Breite der beiden Bilder die gesamte Breite des Containers ausfüllt. – Dan

<img id="one" class="equal" style="width:50%;"/> 
<img id="two" class="equal" style="width:50%;"/>

Quelle

2009-07-23 10:32:44

Das macht sie gleich breit, nicht gleich hoch. – Dan

Wie mache ich Side-by-Side-Bilder gleich groß (CSS/HTML)?

Antwort

Verwandte Themen