dynamischer div-Wrapper bei sich selbst schrumpfendem Bild

Aufbau:

- div "container" hat eine Höhe und Breite in %
- div "img-container" sitzt im "container" und hat eine Höhe von 100% und max-width: 46% (zum parent, also dem "container")
- bild wird in den img-container eingefügt, hat folgende Klasse
.bild {
overflow: hidden;
max-height: 100%;
max-width: 100%;
}
-> effekt: bild passt sich immer dynamisch bei gleichbleibendem Seitenverhältnis dem img-container an, verzerrt also nicht

-> zieht man Browser in der Breite zusammen schrumpft das Bild, eine Leerstelle entsteht unter dem Bild (ist ok)
-> Problem: zieht man Browser in der Höhe zusammen schrumpft das Bild in der Breite, der DIV-container "img-container" bleibt aber bei 46%

Wie krieg ich es hin dass der div-container "img-container" sich an die Breite des geschrumpften Bildes hält?

Danke

Schuss ins Blaue: container bekommt display: inline-block;

nein, nimmt er nicht an, schon versucht, er scheint immer nur die Ursprungsgröße zu berücksichtigen.

auch max-width: fit-content richtet sich an den Wert der Ursprungsgrafik aus, nicht der aktuellen Größe der Grafik.

Eins vorweg: <div class="img-container"> ist semantisch fragwürdig. Da gehört sich eher <figure class="img-container"> hin.

TNM schrieb:

.bild {
overflow: hidden;
max-height: 100%;
max-width: 100%;
}

Zum Vergrößern anklicken....

relativ ungewöhnlich, hier mit 2 max-Werten zu arbeiten. Wie oft kommt es schon vor, dass dein Container in der Höhe begrenzt ist und du nicht scrollen kannst? Normalerweise verwendet man nur max-width:100%;height:auto;. Damit passt sich das Bild in der Breite der Umgebung an, während in der Höhe ganz normal gescrollt wird. Mit begrenzten Höhen zu arbeiten ist reichlich fragwürdig.

Wenn du partout Höhe & Breite des Containers begrenzen willst und gleichzeitig das Bild den Container immer möglichst ausfüllen soll: Arbeite nicht mit <img> sondern verwende das Bild als Background-Image des Containers mit CSS3 background-size:contain; bzw. background-size:cover;

Edit: Oder, um die Semantik zu erhalten (ein BG ist halt kein Bild), versuch dein Glück mal mit absoluter Positionierung: left:0;right:0; , schon klebt das Bild garantiert links und rechts am Rand. Obs dabei aber seine Höhe mit skaliert... vermutlich nicht.

Dynamisches Design. Alles ist "begrenzt" ...der Aufbau ist in % und füllt immer das gesamte Browserfenster aus, egal wie du es "ziehst". Gescrolled wird nicht bzw. in den wenigen Ausnahmefälle bei "grenzwertien Seitenverhältnissen" im container als Option (bei Standardauflösungen/Seitenverhältnissen kein Problem).

Wie du selbst festgestellt hast ergibt das Probleme mit Bildern, z.b. Logos. Man muss diese also, ohne sie zu verzerren oder abzuschneiden, sowohl horizontal als auch vertikal begrenzen. Das funktioniert ja alles auch einwandfrei.

Das Problem ist, wie schon gesagt, dass der div-container des Bildes die Breite des Bildes nicht dynamisch erkennt und sich somit nicht mitverändert. Damit passen sich angrenzende div-container (z.b. Text) nicht an, es entsteht eine Lücke zwischen schrumpfendem Bild und angrenzendem Text.

Klar kann jetzt wer sagen: kenne keine Lösung, bau halt sowas nicht Nur...das genügt mir eigentlich nicht da keine Lösung. Wenns nicht klappt werd ichs umgehen bzw. Kompromisse im Design für "abartige Seitenverhältnisse" machen. Eleganter wär aber anders.

Ein floatender Container sollte, wenn er keine spezifische Breite hat, immer so breit wie sein Content sein. Evtl. hilft das.

Aber insgesamt kann ich mir grad nix vorstellen, was auf nem Hochkant-Smartphone in ~3" genauso ohne Scrollen auskommt, aber auf nem 16:9-Tablet mit 10" oder gar nem 24" TFT nicht total kacke aussieht. Davon hätt ich gern mal ne Demo.