it-swarm.com.de

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

Ich habe diesen Thread gefunden - Wie streckt man ein Bild, 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 möchte immer das div mit dem Bild ausfüllen, unabhängig davon, ob es sich um ein Quer- oder Hochformat handelt. Es spielt keine Rolle, ob das Bild abgeschnitten ist (das div selbst ist ausgeblendet).

Wenn es sich bei dem Bild also um ein Portrait handelt, möchte ich, dass width100% und height:auto sind, damit es im Verhältnis bleibt. Wenn das Bild Querformat ist, möchte ich, dass die height100% und der width to beauto` ist. Klingt kompliziert richtig?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Da ich nicht weiß, wie ich das machen soll, habe ich einfach ein schnelles Bild von dem gemacht, was ich meine. Ich kann es nicht einmal richtig beschreiben.

enter image description here

Ich denke, ich bin nicht der erste, der das fragt. Ich konnte jedoch keine Lösung dafür finden. Möglicherweise gibt es dafür eine neue CSS3-Methode - ich denke an Flex-Box. Irgendeine Idee? Vielleicht ist es sogar einfacher als ich erwartet habe?

76
matt

Wenn ich richtig verstehe, was Sie möchten, können Sie die Breiten- und Höhenattribute außerhalb des Bildes lassen, um das Seitenverhältnis beizubehalten, und Flexbox verwenden, um die Zentrierung für Sie auszufü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.

111
Isius

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 zusammen mit max-height, max-width, min-width und min-height css-Eigenschaften. Es ist besonders praktisch, wenn Sie Längeneinheiten wie 100% oder 100vh/100vw verwenden, um den Container oder das gesamte Browserfenster zu füllen.

31
Hermilton

Eine alte Frage, die aber ein Update verdient, da es jetzt einen Weg gibt.

Die richtige Antwort auf CSS-Basis ist object-fit: cover, die wie background-size: cover funktioniert. Die Positionierung würde durch das Attribut object-position erledigt, das standardmäßig zentriert wird.

Aber es wird von keinem IE/Edge-Browser oder Android <4.4.4 unterstützt. object-position wird auch nicht von Safari, iOS oder OSX unterstützt. Polyfills existieren, object-fit-images scheint die beste Unterstützung zu geben.

Weitere Informationen zur Funktionsweise der Eigenschaft finden Sie im Artikel CSS Tricks zu object-fit .

7
holist

Das sollte es tun:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
5
maksim1

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>

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

2
Marat Tanalin

Versuche dies:

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

Hoffe das hilft

2
Landerqvist

Hier hast du mein Arbeitsbeispiel. Ich habe einen Trick verwendet, bei dem das Bild als Hintergrund für den div-Container mit Hintergrundgröße festgelegt wird: Abdeckung und Hintergrundposition: Mitte Mitte

Ich habe das Bild mit Breite: 100% und Deckkraft: 0 platziert, wodurch es unsichtbar wird. Beachten Sie, dass mein Bild nur angezeigt wird, weil ich ein spezielles Interesse daran habe, das untergeordnete Klickereignis aufzurufen.

Bitte beachten Sie, dass ich, obwohl ich eckig verwende, völlig irrelevant ist. 

<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 Ergebnis, das Sie in allen Fällen als optimal definieren 

1
Noel Carcases

Dies erreichen Sie mit den Eigenschaften von css flex. Bitte sehen Sie den Code unten

.img-container {
  width: 150px;
  height: 150px;
  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>

1
Sandeep K Nair

Alle Antworten haben eine feste Breite und Höhe, wodurch die Lösung "nicht ansprechbar" ist.

Um das Ergebnis zu erreichen, aber auf das Bild zu reagieren, habe ich Folgendes verwendet:

  1. Platzieren Sie im Container ein transparentes GIF-Bild mit dem gewünschten Verhältnis 
  2. Geben Sie einem Image-Tag einen Inline-CSS-Hintergrund mit dem Bild, dessen Größe Sie ändern und beschneiden 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;
}​
0
Artur Klassen

Die einzige Möglichkeit, das beschriebene "Best Case" -Szenario zu erreichen, bestand darin, das Bild als Hintergrund darzustellen:

<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%;
}​
0
David Nathan

Die Eigenschaftswerte CSS object-fit: cover und object-position: left center beheben jetzt dieses Problem.

0
James

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

0
Yaseen