Wie kann ich ein Div mit einem Bild füllen, während es proportional bleibt?

120

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 widthes so ist 100%und height:autodass es proportional bleibt. Wenn das Bild Querformat ist, möchte ich das heightsein 100%und das width to beAuto`. 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.

Geben Sie hier die Bildbeschreibung ein

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?

matt
quelle
Warum möchten Sie CSS3 verwenden, wenn Sie es mit Javascript immer noch problemlos tun können? Gehen Sie mit js matey ..
GautamJeyaraman
1
Ungetestet, aber Sie könnten versuchen, die Mindesthöhe und Mindestbreite auf 100% einzustellen? Das sollte zumindest die Box füllen und im Verhältnis halten
Chrisbulmer

Antworten:

150

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.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

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.

Isius
quelle
In IE9 wird das Bild bei dieser Methode nicht vertikal oder horizontal zentriert, sondern nach oben und links ausgerichtet. i59.tinypic.com/ouo77s.png
Mike Kormendy
1
Dies hat ein Problem auf dem iPad. Es scheint, dass Safari das Bild auf 100% seiner Höhe streckt, aber die Eigenschaft min-width nicht beibehält.
Sean
14
Dies scheint kleine Bilder zu vergrößern, um sie zu füllen, aber nicht, um sie anzupassen. Zumindest wenn ich ein großes Bild verwende, zeigt es nur einen winzigen Teil davon.
Johncl
12
Um ein großes Bild passend zu verkleinern, habe ich Folgendes auf dem Bild verwendet:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Peter G
Superheld! : D
Garis M Suero
47

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 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

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.

Hermilton
quelle
Ist das eine Crossbrowser-Lösung?
Candlejack
1
Objektanpassung: Abdeckung; funktioniert super! Browser-Informationen (funktionieren im IE nicht): css-tricks.com/almanac/properties/o/object-fit Fallback-Lösung für den IE: medium.com/@primozcigler/… MS arbeitet an der Implementierung: developer.microsoft.com / en-us / microsoft-edge / platform / status /…
Kaah
Ich denke, das Hinzufügen einer object-positionRegel zu dieser Klasse wird hier hilfreich sein. Nur eine Randnotiz.
Taha Paksu
8

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 funktioniert background-size: cover. Für die Positionierung wird nach object-positionAttributen gesorgt, die standardmäßig zentriert sind.

In IE / Edge-Browsern oder Android <4.4.4 wird dies jedoch nicht unterstützt. Wird object-positionauch 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-Tricksobject-fit zur Erläuterung und Demo.

ganzheitlich
quelle
8

Dies sollte es tun:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
maksim1
quelle
Funktioniert ziemlich gut für mich, in meinem Fall musste ich nur die Position hinzufügen: absolut und top: 0 und auch einen Z-Index
byroncorrales
7

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:

  1. Im Behälter platzieren Sie ein transparentes GIF-Bild mit dem gewünschten Anteil
  2. Geben Sie einem Bild-Tag einen Inline-CSS-Hintergrund mit dem Bild, dessen Größe Sie ändern und zuschneiden möchten

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​
Artur Klassen
quelle
Ich habe ein Hintergrundbild für meine gesamte Website des Design-Portfolio-Unternehmens verwendet, damit ich die Hintergrundgröße: Cover haben kann. Jetzt ist meine Bild-SEO völlig durcheinander, weil Hintergrundbilder von Google nicht erkannt werden. Ich wünschte, ich hätte es anders codiert.
Alex Banman
5

Sie können dies mithilfe der CSS-Flex-Eigenschaften erreichen. Bitte beachten Sie den Code unten

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Sandeep K Nair
quelle
1
Dies funktioniert NUR, wenn Sie die in einigen anderen Antworten erwähnten Eigenschaften für Breite und Höhe entfernen.
Chiwda
3

background-size: coverErwägen Sie die Verwendung von (IE9 +) in Verbindung mit background-image. Für IE8- gibt es eine Polyfüllung .

Marat Tanalin
quelle
Benötigt dies keine Hintergrund-URL? Können Sie mehr ausarbeiten? Kann dies mit dem in der Frage angegebenen <img src = "" /> funktionieren?
Harsimranb
@harsimranb Natürlich background-sizemacht es auch nur mit background-imageangegeben Sinn (ich habe meine Antwort entsprechend aktualisiert). Es gilt nicht für IMGElemente.
Marat Tanalin
Dies ist die beste Antwort. Es ist einfach und hat eine gute Browserunterstützung. Alle anderen Lösungen sind entweder sehr komplex oder funktionieren im IE nicht (9).
JoostS
1

Versuche dies:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Hoffe das hilft

Landerqvist
quelle
1

Sie können div verwenden, um dies zu erreichen. ohne img tag :) hoffe das hilft.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
<div class="img">	
</div>
<div class="img1">	
</div>

Sivasakthivel Kalaiarasu
quelle
1

Der einzige Weg, um das beschriebene "Best-Case" -Szenario zu erreichen, bestand darin, das Bild als Hintergrund zu setzen:

<div class="container"></div>
.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​
David Schumann
quelle
1

Hier ist eine Antwort mit Unterstützung für die Verwendung von IE, object-fitdamit Sie das Verhältnis nicht verlieren

Verwenden Sie ein einfaches JS-Snippet, um festzustellen, ob das object-fitunterstützt wird, und ersetzen Sie dann das imgfür asvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />


Hinweis: Es gibt auch einige object-fitPolyfills, die object-fitfunktionieren.

Hier einige Beispiele:

Dippas
quelle
0

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.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Das Ergebnis ist das, das Sie in allen Fällen als optimal definieren

Noel Schlachtkörper
quelle
0

Die CSS- object-fit: coverund object-position: left centerEigenschaftswerte beheben jetzt dieses Problem.

Dekompiliert
quelle
0

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>

Yaseen
quelle
-3

Korrigieren Sie einfach die Höhe des Bildes und geben Sie width = auto an

img{
    height: 95vh;
    width: auto;
}
Sarthak
quelle