HTML: Bilder auf gleiche Größe bringen und nebeneinander erzwingen

[Mr. Brooks]

Tach,

ich möchte gern 2 Bild mit unterschiedlicher Größe zwingend nebeneinander anordner, beide sollen die gleiche Größe haben. Weiterhin haben beide Bilder Bild-Untertexte. Bisher habe ich mir mit einer Tabelle beholfen.

<table><tr><td>
<img src="image1.jpg" height=1000px/>
<p>text</p>
</td><td>
<img src="image2.jpg" height=1000px/>
<p>text</p>

</td></tr></table>

Problem hier ist, dass sich das Seitenverhältnis ändert, wenn die Seite schmaler wird. Besser wäre es, wenn sich die Bilder auch in der Höhe verkleinern, wenn die Seite schmaler wird. Das geht ohne "height", ab da sind die Bilder halt unterschiedlich groß.

Ich brauche eine Möglichkeit wie ich die Bilder zwingend auf die gleiche Größe bringe, wo aber dennoch das Seitenverhältnis beibehalten wird. Weiterhin sollen die Bild-Untertexte unter den jeweiligen Bildern stehen bleiben, weshalb ich mir mit eine Tabelle behelfe. Das geht auch mit <figure> und <figcaption>, da habe ich aber Probleme die Bilder nebeneinander zu platzieren. Normal macht man das wohl mit "align=right|left", das platziert Bild 2 aber nicht zwingend neben Bild 1 sondern nur wenn Platz ist.

Alternative wäre noch die Bilder mit einem Bildbearbeitungsprogramm zu einem zusammen zu fügen.

Mr. Brooks

 

[KWMM]

Schon versucht?

<meta name="viewport" content="width=device-width">

 

[kim88]

Ich würde das nicht mit Tabellen machen sondern mit z.b. mit Flexbox:

HTML:

<div class="images">
  <div class="image_item">
    <img src="https://via.placeholder.com/1920x1080.png?text=Bild%201" alt="">
  </div>
  <div class="image_item">
    <img src="https://via.placeholder.com/500/FF0000/FFFFFF/?Text=Bild%202" alt="">
  </div>
</div>

CSS:

.images {
  display: flex;
  flex-direction: row;
}

.image_item {
  width: 50%;
}

.image_item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Beim CSS ".image_item img" - kannst du über height die Höhe definieren.

Das "flex-direction: row" ist überflüssig. Da es der Browser-Default ist. Theoretisch könntest du dann mit einem Media Query das in Column ändern, dass es z.b. auf einem Smartphone untereinander angeordnet ist.

 

[Fombu]

Ich würde das nicht mit Tabellen machen sondern mit z.b. mit Flexbox:

Alternativ mit display: grid

 

[Mr. Brooks]

So richtig geht das nicht. Mit "object-fit: cover" werden manchmal Teile vom Bild weggeschnitten. Ich hab mit anderen Einstellungen für "object-fit" experimentiert, aber keiner macht so recht was ich will. Teilweise passieren auch komische Sachen, z. B. ein sehr großer Freiraum über und unter dem Bild.

Mal 2 allgemeine Fragen: Gibt es eine Möglichkeit Änderungen des Seitenverhältnisses eines Bildes generell abzuschalten, so dass es immer im originalen SV angezeigt wird, egal wie groß die Seite ist? Kann ich die Größe eines Bildes "relativ" angeben, also "Höhe von Bild 2 wie Bild 1"?

 

[kim88]

Naja du hast bei unterschiedlich grossen Bildern immer nur folgende Möglichkeiten:

Möglichkeit 1: Bild verzerren (die Zeile objec-fit einfach entfernen)

Möglichkeit 2: Bild beschneiden (Zeile so lassen)

Möglichkeit 3: Mit unterschiedlichen Rändern arbeiten (object-fit: contain). Da kann man mit "object-position" noch das Bild innerhalb vom div positionieren. Evtl width: noch auf auto setzen.

Mal 2 allgemeine Fragen: Gibt es eine Möglichkeit Änderungen des Seitenverhältnisses eines Bildes generell abzuschalten, so dass es immer im originalen SV angezeigt wird, egal wie groß die Seite ist? Kann ich die Größe eines Bildes "relativ" angeben, also "Höhe von Bild 2 wie Bild 1"?

Also mit "object-fit: contain" sollte das Seitenverhältnis bleiben.
Grösse von Bild 2 Abhängig von Bild 1 müsstest du mit JS machen. Mit JavaScript Gröse von Bild 1 auslesen, dann entsprechen Grösse von Bild 2 per JS anpassen.

Ergänzung (20. April 2021)

Nachtrag:

Man kann die Bilder vorab natürlich auch vorbereiten. Also Bilder so erstellen wie man sie braucht und einfach diese einbinden.