Gibt es ein Äquivalent zur Hintergrundgröße: Cover und Contain für Bildelemente?

Ich habe eine Site mit vielen Seiten und verschiedenen Hintergrundbildern und zeige sie über CSS wie folgt an:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

Ich möchte jedoch verschiedene (Vollbild-) Bilder auf einer Seite mithilfe von <img>Elementen anzeigen und möchte, dass sie dieselben Eigenschaften wie die oben genannte background-image: cover;Eigenschaft haben (die Bilder können nicht über CSS angezeigt werden, sie müssen aus dem HTML-Dokument angezeigt werden).

Normalerweise benutze ich:

div.mydiv img {
    width: 100%;
}

Oder:

div.mydiv img {
    width: auto;
}

um das Bild voll und reaktionsschnell zu machen. Das Bild schrumpft jedoch zu stark ( width: 100%), wenn der Bildschirm zu schmal wird, und zeigt die Hintergrundfarbe des Körpers im unteren Bildschirm. Bei der anderen Methode width: auto;wird das Bild nur in voller Größe angezeigt und reagiert nicht auf die Bildschirmgröße.

Gibt es eine Möglichkeit, das Bild genauso anzuzeigen wie dies der Fall background-size: coverist?

Lösung 1 - Die Objektanpassungseigenschaft ( fehlende IE-Unterstützung )

Einfach object-fit: cover;auf das Bild setzen.

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000" />

Siehe MDN - bezüglich object-fit: cover:

Der ersetzte Inhalt wird so bemessen, dass sein Seitenverhältnis beibehalten wird, während das gesamte Inhaltsfeld des Elements ausgefüllt wird. Wenn das Seitenverhältnis des Objekts nicht mit dem Seitenverhältnis seiner Box übereinstimmt, wird das Objekt passend zugeschnitten.

Siehe auch diese Codepen-Demo, in der die object-fit: coverAnwendung auf ein Bild mit der background-size: coverAnwendung auf ein Hintergrundbild verglichen wird

Lösung 2 - Ersetzen Sie das Bild durch ein Hintergrundbild durch CSS

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}

<img src="http://placehold.it/1500x1000" />

Es gibt tatsächlich eine recht einfache CSS-Lösung, die sogar unter IE8 funktioniert:

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

Angenommen, Sie können ein Containerelement einrichten, das Sie füllen möchten, scheint dies zu funktionieren, fühlt sich jedoch etwas hackisch an. Im Wesentlichen verwende ich nur min/max-width/heighteine größere Fläche und skaliere diese Fläche dann auf die ursprünglichen Abmessungen zurück.

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}

<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>

Ich habe eine einfache Lösung gefunden, um sowohl Cover als auch Contain zu emulieren, die reines CSS ist, für Container mit dynamischen Abmessungen funktioniert und auch das Bildverhältnis nicht einschränkt.

Beachten Sie, dass Sie die Objektanpassung besser verwenden sollten, wenn Sie IE oder Edge vor 16 nicht unterstützen müssen.

Hintergrundgröße: Abdeckung

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}

<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Die 1000% werden hier verwendet, wenn die natürliche Bildgröße größer ist als die Größe, die angezeigt wird. Beispiel: Wenn das Bild 500 x 500 ist, der Container jedoch nur 200 x 200. Mit dieser Lösung wird die Bildgröße auf 2000 x 2000 (aufgrund der Mindestbreite / Mindesthöhe) geändert und dann auf 200 x 200 (aufgrund von) verkleinert transform: scale(0.1).

Der x10-Faktor kann durch x100 oder x1000 ersetzt werden, aber es ist normalerweise nicht ideal, wenn ein 2000x2000-Bild auf einem 20x20-Div gerendert wird. :) :)

Hintergrundgröße: enthalten

Nach dem gleichen Prinzip können Sie damit auch Folgendes emulieren background-size: contain:

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}

<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Nein , Sie können es nicht ganz so bekommen, background-size:cover aber ..

Dieser Ansatz ist ziemlich nah dran: Er verwendet JavaScript, um festzustellen, ob das Bild Quer- oder Hochformat ist, und wendet Stile entsprechend an.

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

Ich musste emulieren background-size: contain, konnte es aber object-fitaufgrund mangelnder Unterstützung nicht verwenden . Meine Bilder hatten Container mit definierten Abmessungen und dies funktionierte für mich:

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

Versuchen Sie , beide min-height und min-width, mit display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

( Geige )

Vorausgesetzt, das Element , das Ihr Bild enthält, ist position:relativeoder position:absolute, deckt das Bild den Container ab. Es wird jedoch nicht zentriert.

Sie können das Bild leicht zentrieren, wenn Sie wissen, ob es horizontal (Set margin-left:-50%) oder vertikal (Set margin-top:-50%) überläuft . Es kann möglich sein, CSS-Medienabfragen (und etwas Mathematik) zu verwenden, um dies herauszufinden.

Mit CSS können Sie simulieren object-fit: [cover|contain];. Es ist Gebrauch transformund [max|min]-[width|height]. Es ist nicht perfekt. Das funktioniert in einem Fall nicht: Wenn das Bild breiter und kürzer als der Container ist.

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

Sie können das Attribut 'style' verwenden, um das Hintergrundbild zum Element hinzuzufügen. Auf diese Weise rufen Sie das Bild weiterhin im HTML-Code auf, können jedoch weiterhin die Hintergrundgröße verwenden: cover css behaviour:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

Auf diese Weise füge ich Elementen, die ich dynamisch in HTML laden muss, das Verhalten von Hintergrundgröße: Abdeckung hinzu. Sie können dann fantastische CSS-Klassen wie Hintergrundposition: Mitte verwenden. Boom

Für IE müssen Sie auch die zweite Zeilenbreite angeben: 100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}

Ich darf keinen Kommentar hinzufügen, um dies zu tun, aber ja, was Eru Penkman getan hat, ist ziemlich genau richtig, um es wie eine Hintergrundabdeckung zu bekommen. Alles, was Sie tun müssen, ist sich zu ändern

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

ZU

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

Ich weiß, dass dies alt ist, aber viele Lösungen, die ich oben sehe, haben ein Problem damit, dass das Bild / Video zu groß für den Container ist und sich nicht wie eine Abdeckung in Hintergrundgröße verhält. Ich habe mich jedoch entschlossen, "Utility-Klassen" zu erstellen, damit dies für Bilder und Videos funktioniert. Sie geben dem Container einfach die Klasse .media-cover-wrapper und dem Medienelement selbst die Klasse .media-cover

Dann haben Sie folgende jQuery:

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

Achten Sie beim Aufrufen auf die Größenänderung der Seite:

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

Dann das folgende CSS:

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Ja, es erfordert möglicherweise jQuery, aber es reagiert recht gut und verhält sich genau wie Hintergrundgröße: Cover und Sie können es für Bilder und / oder Videos verwenden, um diesen zusätzlichen SEO-Wert zu erzielen.

Wir können den ZOOM-Ansatz verfolgen. Wir können davon ausgehen, dass maximal 30% (oder mehr bis zu 100%) der Zoomeffekt sein können, wenn die Höhe ODER Breite des Seitenbilds kleiner als die gewünschte Höhe ODER Breite ist. Wir können den Rest nicht benötigten Bereich mit Überlauf verstecken: versteckt.

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Dadurch werden Bilder mit unterschiedlicher Breite ODER Höhe angepasst.

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

traf genau die gleichen Symptome. oben hat für mich gearbeitet.