CSS - Bild Höhe neben flexiblen Text Container anpassen, wenn Display schmaler wird

[ebody]

Hallo,

ab einer Breite von 1024px sieht der Abschnitt so aus:

Die Textbox ist flexibel und passt sich bei einer schmaleren Breite an. Dadurch wird die gesamte Textbox höher. Das Bild soll links die gleiche Höhe wie die Textbox füllen.

Das Bild hat ein Hochformat und ist in Wirklichkeit viel länger als im Abschnitt angezeigt, eben für diesen Fall. Der "Ausschnitt" des Eltern Elements aber passt sich nicht der neuen Höhe an. Ich wüsste gerade auch nicht, wie man diesen Ausschnitt in der Höhe flexibel machen könnte.

<div class="img-box"><img src="https://cdn.pixabay.com/photo/2022/08/26/04/19/beach-7411683_960_720.jpg" /></div>

.img-box{
  grid-column: 2/3;
  min-height: 328px;
  height: 100%;
  max-height: 700px;
  width: 100%;
  overflow: hidden;
}

img{
  width: 462px;
} 

Mit Media Queries könnte man es lösen, aber dann müsste man ja jede Pixelbreite pro einzelnen Pixel abfragen. Daher wollte ich mal fragen, ob jemand hierfür eine Idee, Lösung kennt, um es ohne Media Queries zu lösen?

Gruß ebody

[ebody]

Mich würde schon interessieren, ob es für die Variante, wo das Bild als <img> Tag verwendet wird, eine Lösung gibt.

Mit einem Hintergrundbild klappt es schon mal.

<main>
  <section>
    <div class="img-box"></div>
    <div class="text-box">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus at
        reprehenderit dolorum modi accusamus, aliquam sapiente vero eum quidem
        dolores! Vitae tempora ipsa obcaecati possimus recusandae consequuntur
        nisi quis mollitia!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus at
        reprehenderit dolorum modi accusamus, aliquam sapiente vero eum quidem
        dolores! Vitae tempora ipsa obcaecati possimus recusandae consequuntur
        nisi quis mollitia!
      </p>
    </div>
  </section>
</main>

.img-box {
  background: url("https://cdn.pixabay.com/photo/2022/08/26/04/19/beach-7411683_960_720.jpg");
  background-origin: content-box;
  background-size: 462px auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  grid-column: 2/3;
  height: 100%;
  min-height: 328px;
  max-height: 720px;
  width: 100%;
  overflow: hidden;
}

img {
  width: 462px;
}

Gruß ebody

[Gunnar Bittersmann]

@@ebody

Mich würde schon interessieren, ob es für die Variante, wo das Bild als <img> Tag verwendet wird, eine Lösung gibt.

Warum wills du das rein dekorative Bild nicht als Hintergrundbild haben?

Mit einem Hintergrundbild klappt es schon mal.

Und das auch ohne die zusätzlichen div-Elemente.

🖖 Живіть довго і процвітайте

[ebody]

Warum wills du das rein dekorative Bild nicht als Hintergrundbild haben?

Es würde mich so oder so interessieren, ob es so auch möglich ist. Ein Vorteil würde ich darin sehen, weil man dann verschiedene, bessere Bild Formate (.webp und .jpg, .png...) je Browser verwenden kann.

<picture>
  <source
    type="image/webp"
    srcset="bild-name.webp 1x, [e-mail] 2x"
  />
  <source
    type="image/jpg"
    srcset="bild-name.jpg 1x, [e-mail] 2x"
  />
  <img src="bild-name.jpg" alt="" />
</picture>

Mit Media Queries könnte man zwar ab einer entsprechenden Displaybreite [e-mail] als Hintergrundbild verwenden, aber eben nicht [e-mail]. Weil .webp nicht von jedem Browser (u.a. Safari) unterstützt wird. Meine ich zumindest.

Wobei, wenn ich das hier sehe kann man evtl. doch nur .webp verwenden?! Was meinst du (und andere)?

Gruß ebody

[Rolf B]

Hallo ebody,

schau Dir mal die Eigenschaftswerte cover und contain für background-size an. In einem img-Element kannst Du mit der object-fit Eigenschaft ebenfalls cover oder contain festlegen. Das img kannst Du mittels height an seinen Container anpassen. Oder Du überlässt das dem Layoutmodell des Browsers, z.B. mit align-items:stretch (was bei Flexbox eh Default ist).

Bei Grid müsstest Du es explizit angeben, weil ein img eine intrinsische Größe hat, da wird es nicht gleich gestretcht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Oder Du überlässt das dem Layoutmodell des Browsers, z.B. mit align-items:stretch (was bei Flexbox eh Default ist).

Bei Grid müsstest Du es explizit angeben, weil ein img eine intrinsische Größe hat, da wird es nicht gleich gestretcht.

Wenn man da mit Flexbox oder Grid ranwill, braucht man aber ein zusätzliches Containerelement um den Text, oder? (Sofern es sich um mehrere Absätze handelt.)

Unschön; deshalb hab ich das mit absoluter Positionierung gemacht.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@ebody

Warum wills du das rein dekorative Bild nicht als Hintergrundbild haben?

Es würde mich so oder so interessieren, ob es so auch möglich ist.

Klar, ziemlich genauso wie mit Pseudoelement. Mit dem von @Rolf B schon erwähntem object-fit. Guckst du.

Ein Vorteil würde ich darin sehen, weil man dann verschiedene, bessere Bild Formate (.webp und .jpg, .png...) je Browser verwenden kann.

Warum nicht gleich AVIF?

Wobei, wenn ich das hier sehe kann man evtl. doch nur .webp verwenden?! Was meinst du (und andere)?

Grün, soweit das Auge reicht. Und da es sich ohnehin nur um Dekoration handelt, bracht man keinen Fallback.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Grün, soweit das Auge reicht. Und da es sich ohnehin nur um Dekoration handelt, bracht man keinen Fallback.

Allerdings ist Browser etwas laden zu lassen, was sie dann doch nicht darstellen können, auch nicht die feine englische Art^[1].

Besser doch mit picture und Fallback, der auch nichts sein kann:

<picture>
  <source srcset="image.avif" media="image/avif"/>
  <source srcset="image.webp" media="image/webp"/>
  <img src="data:image/svg+xml,%3Csvg%3E%3C/svg%3E" alt=""/>
</picure>

🖖 Живіть довго і процвітайте

---

1. Der Begriff ist in diesen Tagen schon ein Witz. ↩︎