background-size: cover

[heinetz]

Hallo Forum,

gibt es einen eleganten Weg, dass Verhalten mit folgendem Markup nachzubilden?

<div>
 <img src="dummy.jpg">
 <p>Dummy</p>
</div>

danke für Tipps und

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

gibt es einen eleganten Weg, dass Verhalten mit folgendem Markup nachzubilden?

Gibt es einen eleganten Weg, die Bedeutung von „dass Verhalten“ [sic!] zu erklären?

LLAP 🖖

[heinetz]

• Die Box soll mit einem Hintergundbild enthalten.
• Das Hintergrundbild soll die Box ausfüllen.
• Andere Elemente sollen über dem Hintergundbild angeordnet sein, ohne dass sie absolut positioniert werden müssen.

Ist das genauer?

[Henry]

Hallo heinetz,

Das hier kennst du schon?

Oder direkt das Beispiel?

Gruss
Henry

[heinetz]

Ja, das kenne ich. Aber ich muss die Grafik mit einem img-Tag bauen und kann object-fit nicht benutzen.

[Gunnar Bittersmann]

@@heinetz

Aber ich muss die Grafik mit einem img-Tag bauen

Warum?

und kann object-fit nicht benutzen.

Warum nicht?

LLAP 🖖

[heinetz]

Weil der IE 11 in meiner Browsermatrix steht.

[Henry]

Hallo heinetz,

• Die Box soll mit einem Hintergundbild enthalten.
• Das Hintergrundbild soll die Box ausfüllen.
• Andere Elemente sollen über dem Hintergundbild angeordnet sein, ohne dass sie absolut positioniert werden müssen.

Ist das genauer?

Nicht wirklich. Also doch Hintergrundbild? Nein, als img? Warum? Ich hatte dir doch zuletzt mal eine Spielwiese gezeigt, warum nutzt du das hier nicht für deine Beispiele?

Ich habe das jetzt mal gemacht und wäre schön wenn du das dort mal zeigst (ändern, link erstellen, hier posten) was du genau vorhast.

Gruss
Henry

[heinetz]

Du hast recht. Das war nicht eindeutig und ausserdem ist das 'lebende' Objekt meist selbsterklärend 😉

Diese Lösung mit object-fit:cover …

https://codepen.io/heinetz/pen/mxPqQM

... entspricht der gewünschten Darstellung.

der Lösung mit background-image ...

https://codepen.io/heinetz/pen/JLXMNN

... entspricht der gewünschten Darstellung.

Dafür benötige ich eine Alternative, da a) auch mit dem IE 11 funktioniert und b) ohne background-image funktioniert.

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

Ist das so schwer, deine Pens zu verlinken? Ich hab das mal berichtigt; beim nächsten Mal bitte selbst.

Dafür benötige ich eine Alternative, da a) auch mit dem IE 11 funktioniert

JavaScript.

Für eine Handvoll Nutzer den Aufwand betreiben, ernsthaft? Was spricht dagegen, dass bei IE-Nutzern die Box mit dem Bild in einer von dir festgelegten Größe angezeigt wird?

LLAP 🖖

[drdf]

Im Bezug auf den Pen von @heinetz

.teaser__image {
  /* Kompromiss für den IE */
  height: 120%;
  width: auto;
}

@supports (object-fit:cover) {
  .teaser__image {
    height: 100%;
    width: 100%;
    object-fit:cover;
  }
}

[drdf]

b) ohne background-image funktioniert.

Ein individuelles background-image ließe sich auch als inline-Style definieren.

• Wenn die Individualität des Bildes das Problem ist?!

<div class="teaser" style="background-image: url('dummy.jpg');">
 <img src="dummy.jpg">
 <p>Dummy</p>
</div>

.teaser
{
  background-size:cover;
  background-position: center;
  /* das individuelle image ist inline definiert, hier nur der Fallback */
  background-image: url('fallback.jpg');
}
.teaser>img
{
  display: none;
}

[heinetz]

Das Bild ist möglicherweise auch ein Video

[Rolf B]

Hallo heinetz,

darf denn das img absolut positioniert werden? Wenn ja, dann

• tu das
• leg es mit z-index:-1 hinter den Rest des Content.
• platziere das img Tag als letzten Inhalt in der Box

Also so was: https://jsfiddle.net/wqkrvLna/2/

Der vierfache Textschatten sorgt für Lesbarkeit. Geht auch mit einem einfachen Schatten, Verschiebung 0 und blur-radius 0.1em, aber das war mir zu wenig Kontrast.

Das div um das img habe ich gemacht, weil ich verdammt noch mal keine Ahnung hatte, wie ich das Bild sonst hätte zentrieren können. Es war zu schmal, und margin:auto greift bei position:absolute nicht…

Jedenfalls ist das eine Lösung, die mit img arbeitet, das Bild in der Box hält und auch mit IE11 funkt. Und wenn Du ein breiteres Hintergrundbild hast, dann füllt es die Box auch völlig...

Rolf