Bootstrap 4.5 | Desktop: Bilder Float | Mobil: Bilder break | Hilfe ich raffe das nicht mehr

[Edda im Homeoffice (verzweifelt)]

Hi,

ich verwende die aktuelle Boostrap 4.5v . Ich möchte gerne 300x300 px Bilder im Content einbinden. Das klappt mit den Classes "float-right" und "img-thumbnail" super (siehe https://jsfiddle.net/L1ns2h9u/ ). Allerdings in der Mobilenansicht habe ich so 1 oder 2 Buchstaben neben dem Bild. Das sieht extrem unschön aus.

Ich habe bei andern Webseiten ( https://demo.tagdiv.com/newspaper_magazine_pro/2020/06/03/td-post-the-real-economy-has-never-been-tested-by-a-pandemic/ ) gesehen, das das 300px breite Bild [...]Looking to the future with optimism[...] ab XXX px wie eine Art BREAK vor dem Bild bekommen.

Leider reichen meine HTML Kenntnisse nicht mehr aus, um den Code zu verstehen. HILFE

[Gunnar Bittersmann]

@@Edda im Homeoffice (verzweifelt)

Ich möchte gerne 300x300 px Bilder im Content einbinden. Das klappt mit den Classes "float-right" und "img-thumbnail" super (siehe https://jsfiddle.net/L1ns2h9u/ ). Allerdings in der Mobilenansicht habe ich so 1 oder 2 Buchstaben neben dem Bild. Das sieht extrem unschön aus.

Du darfst nur dann den Text ums Bild fließen lassen, wenn neben dem Bild genügend Platz ist, also erst ab einer gewissen Viewportbreite. Auch dafür gibt’s Bootstrap-Klassen.

☞ Look Ma, no CSS 🤮

Nein, ich bin weißgott nicht stolz darauf, Bootstrap-Kenntnisse zu haben.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Edda im Homeoffice (verzweifelt)]

Danke Gunar,

ich habe es jetzt auf

<img src="https://via.placeholder.com/300" 
      class="float-md-right img-thumbnail wp-post-image"
      alt=""
      loading="lazy"
      title="" 
      srcset="https://via.placeholder.com/300 300w, https://via.placeholder.com/1024 1024w, https://via.placeholder.com/150 150w, https://via.placeholder.com/768 768w, https://via.placeholder.com/1236 1236w"
      sizes="(max-width: 300px) 100vw, 300px"
      width="300"
      height="300">

geändert.

Auch wenn du auf deine Bootstrap kenntnisse nicht stolz bist. Vielen, vielen Dank.

Vielleicht hast du noch einen Tip wie ich das (nach dem Umbruch) centern kann.

Danke

Edda @homeoffice

[Rolf B]

Hallo Edda,

ich habe das <img> Tag mal editiert, um es lesbarer zu machen.

Frage an Gunnar: das sieht nach einem grob unlesbaren Stringmonster aus. Ich kann mangels eigener Erfahrung nicht sagen, wo die Abgrenzung zwischen <picture> und <img srcset> ist - kann man da mit einem <picture> Element bei gleicher Funktionalität lesbarer gestalten?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Edda,

ich habe das <img> Tag mal editiert, um es lesbarer zu machen.

Noch lesbarer wär’s so:

<img
  src="https://via.placeholder.com/300" 
  class="float-md-right img-thumbnail wp-post-image"
  alt=""
  loading="lazy"
  title="" 
  srcset="
    https://via.placeholder.com/300 300w,
    https://via.placeholder.com/1024 1024w,
    https://via.placeholder.com/150 150w,
    https://via.placeholder.com/768 768w,
    https://via.placeholder.com/1236 1236w
  "
  sizes="(max-width: 300px) 100vw, 300px"
  width="300"
  height="300"
/>

Ganz schöne Unordnung in srcset. Üblicherweise sieht man die Varianten aufsteigend geordnet im Code.

Aber was das überhaupt? Das Bild soll 300px breit dargestellt werden, wenn der Viewport mindestens 300px breit ist, ansonsten schmaler (100%).

Das heißt, man braucht das Bild in einer Variante mit 300px Breite und für doppelte Bildschirmauflösung eine Variante mit 600px Breite. Ich bin mal so keck und behaupte, den Unterschied zwischen einfacher und doppelter Bildschirmauflösung sieht man deutlich; den zwischen doppelter und noch höherer jedoch kaum, sodass es nicht lohnt, dafür Dateigröße = Datenübertragung zu vergeuden.

Dann:

<img
  src="https://via.placeholder.com/300"
  ⋮
  srcset="https://via.placeholder.com/600 2x"
  sizes="300px"
  width="300"
  height="300"
/>

Das alt-Attribut ist mit sinvollem Alternativtext zu füllen. title="" ist zu entsorgen.

---

Frage an Gunnar: das sieht nach einem grob unlesbaren Stringmonster aus. Ich kann mangels eigener Erfahrung nicht sagen, wo die Abgrenzung zwischen <picture> und <img srcset> ist - kann man da mit einem <picture> Element bei gleicher Funktionalität lesbarer gestalten?

Für verschiedene Auflösungen desselben Bildes ist das srcset-Attribut genau richtig.

Das picture-Element ist für art direction:

• unterschiedliche Bildausschnitte, wenn es keinen Sinn macht, das Bild auf kleinen Vieports einfach nur kleiner darzustellen. Da man dann nichts mehr erkennen kann, bietet es sich an, ein Detail des großen Bildes darzustellen.

• unterschiedliche Bildformate: Querformat bei Desktop landscape mode; Hochformat bei Mobil portrait mode.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das picture-Element ist für art direction:

• unterschiedliche Bildausschnitte […]

• unterschiedliche Bildformate […]

• unterschiedliche Grafikformate: Man kann für fähige Browser ein stärker komprimiertes WebP ausliefern, für unfähige Browser JPEG.

• unterschiedliche Bilder für light mode und dark mode

🖖 Stay hard! Stay hungry! Stay alive! Stay home!