Responsiv Bild neben Text (srcset)

Das Bild orientiert sich an den Außenkanten. Ein Bild in einem div wird sich, wenn responsiv, immer an der maximalen Größe des div orientieren.
Der div bzw. der container ist also der maximale Platz der zur Verfügung steht. Erst wenn der Platz für die maximale größe (bildgröße) zu klein wird, verkleinert sich auch das bild.

Wenn du bild und text in einem div hast, ohne ein childelement zu erzeugen, gibt der text als erstes nach und das bild hat keine kante wo es anstößt. du musst also die maximale größe des bildes mit media queries steuern. das bild ist schon responsiv. das bild nutzt eben 100% breite. das bild sagt praktisch "mein webmaster hat mir befehl gegeben, 100% breite zu nutzen, also mach platz du doofer text, dir kanns ja egal sein!"

als beispiel:

Zitat

Media (min-width: 1200px) {
img {
width: 100%;
}
}

Media (min-width: 820px) {
img {
width: 80%;
}
}

Alles anzeigen

so wären z.B. alle bilder ab einer bildschirmgröße von mindestens 820px 80% groß. ab 1200px werden die bilder mit 100% breite angezeigt.

Ja, das machst du im CSS.

Du kannst es auch pro Seite bzw. pro Bild definieren. Dazu gibst du dem jeweiligem Bild eine eingene class und sprichst es dann im css an. Codebeispiel steht ja oben, aber nochmal mit einer klasse:

Zitat

Media (min-width: 820px) {
.nurdas {
width: 80%;
}
}

Zitat

<img class="nurdas" src="deinbild.jpg" alt="" />