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

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.

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?

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.

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.

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.

Dies sollte es tun:

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

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;
}​

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>

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

Versuche dies:

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

Hoffe das hilft

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>

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

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:

• Objekt-Fit-Bilder
• constancecchen / object-fit-pollyfill
• Polyfill für CSS-Objektanpassungseigenschaft

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

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

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

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