Ich habe diesen Thread gefunden - Wie kann man ein Bild dehnen, um ein <div> zu füllen, während das Seitenverhältnis des Bildes beibehalten wird? - das ist nicht ganz das, was ich will.
Ich habe ein Div mit einer bestimmten Größe und einem Bild darin. Ich mag immer füllen aus dem div mit dem Bild unabhängig davon , ob das Bild Quer- oder Hochformat ist. Und es spielt keine Rolle, ob das Bild abgeschnitten ist (der Div selbst hat einen Überlauf versteckt).
Wenn das Bild also ein Porträt ist, möchte ich, dass width
es so ist 100%
und height:auto
dass es proportional bleibt. Wenn das Bild Querformat ist, möchte ich das height
sein 100%
und das width to be
Auto`. Klingt kompliziert, oder?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Da ich nicht weiß, wie es geht, habe ich einfach ein schnelles Bild von dem erstellt, was ich meine. Ich kann es nicht einmal richtig beschreiben.
Also bin ich wohl nicht der erste, der das fragt. Ich konnte jedoch keine Lösung dafür finden. Vielleicht gibt es dafür eine neue CSS3-Methode - ich denke an Flex-Box. Irgendeine Idee? Vielleicht ist es sogar einfacher als ich erwartet habe?
quelle
Antworten:
Wenn ich richtig verstehe, was Sie wollen, können Sie die Attribute width und height aus dem Bild herauslassen, um das Seitenverhältnis beizubehalten, und Flexbox verwenden, um die Zentrierung für Sie durchzuführen.
JSFiddle hier
Ich habe dies erfolgreich in IE9, Chrome 31 und Opera 18 getestet. Es wurden jedoch keine anderen Browser getestet. Wie immer müssen Sie Ihre speziellen Supportanforderungen berücksichtigen.
quelle
.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Es ist etwas spät, aber ich hatte gerade das gleiche Problem und löste es schließlich mit Hilfe eines anderen Stackoverflow-Beitrags ( https://stackoverflow.com/a/29103071 ).
Hoffe das hilft noch jemandem.
Ps: Funktioniert auch mit CSS-Eigenschaften für maximale Höhe , maximale Breite , minimale Breite und minimale Höhe zusammen . Es ist besonders praktisch, wenn Sie Längeneinheiten wie 100% oder 100vh / 100vw verwenden , um den Container oder das gesamte Browserfenster zu füllen.
quelle
object-position
Regel zu dieser Klasse wird hier hilfreich sein. Nur eine Randnotiz.Eine alte Frage, die aber ein Update verdient, da es jetzt einen Weg gibt.
Die richtige CSS-basierte Antwort ist zu verwenden
object-fit: cover
, was wie funktioniertbackground-size: cover
. Für die Positionierung wird nachobject-position
Attributen gesorgt, die standardmäßig zentriert sind.In IE / Edge-Browsern oder Android <4.4.4 wird dies jedoch nicht unterstützt. Wird
object-position
auch von Safari, iOS oder OSX nicht unterstützt. Es gibt Polyfills, Objekt-Fit-Bilder scheinen die beste Unterstützung zu bieten .Weitere Informationen zur Funktionsweise der Eigenschaft finden Sie im Artikel zu CSS-Tricks
object-fit
zur Erläuterung und Demo.quelle
Dies sollte es tun:
quelle
Alle Antworten unten haben eine feste Breite und Höhe, wodurch die Lösung "nicht reagiert".
Um das Ergebnis zu erzielen, aber das Bild ansprechbar zu halten, habe ich Folgendes verwendet:
HTML:
quelle
Sie können dies mithilfe der CSS-Flex-Eigenschaften erreichen. Bitte beachten Sie den Code unten
quelle
background-size: cover
Erwägen Sie die Verwendung von (IE9 +) in Verbindung mitbackground-image
. Für IE8- gibt es eine Polyfüllung .quelle
background-size
macht es auch nur mitbackground-image
angegeben Sinn (ich habe meine Antwort entsprechend aktualisiert). Es gilt nicht fürIMG
Elemente.Versuche dies:
Hoffe das hilft
quelle
Sie können div verwenden, um dies zu erreichen. ohne img tag :) hoffe das hilft.
quelle
Der einzige Weg, um das beschriebene "Best-Case" -Szenario zu erreichen, bestand darin, das Bild als Hintergrund zu setzen:
quelle
Hier ist eine Antwort mit Unterstützung für die Verwendung von IE,
object-fit
damit Sie das Verhältnis nicht verlierenVerwenden Sie ein einfaches JS-Snippet, um festzustellen, ob das
object-fit
unterstützt wird, und ersetzen Sie dann dasimg
für asvg
Hinweis: Es gibt auch einige
object-fit
Polyfills, dieobject-fit
funktionieren.Hier einige Beispiele:
quelle
Hier haben Sie mein Arbeitsbeispiel. Ich habe einen Trick verwendet, der das Bild als Hintergrund des Div-Containers mit Hintergrundgröße: Cover und Hintergrundposition: Center Center festlegt
Ich habe das Bild mit einer Breite von 100% und einer Deckkraft von 0 platziert, wodurch es unsichtbar wird. Beachten Sie, dass ich mein Bild nur zeige, weil ich ein besonderes Interesse daran habe, das untergeordnete Klickereignis aufzurufen.
Bitte beachten Sie, dass es völlig irrelevant ist, wenn ich einen Winkel verwende.
Das Ergebnis ist das, das Sie in allen Fällen als optimal definieren
quelle
Die CSS-
object-fit: cover
undobject-position: left center
Eigenschaftswerte beheben jetzt dieses Problem.quelle
quelle
Korrigieren Sie einfach die Höhe des Bildes und geben Sie width = auto an
quelle