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

Es gibt eigentlich eine einfache css-Lösung , die sogar auf 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. Dies scheint zu funktionieren, fühlt sich aber etwas hackig an. Im Wesentlichen verwende ich min/max-width/height nur für einen größeren Bereich und skaliere diesen Bereich dann wieder in die ursprünglichen Abmessungen.

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

Nein, Sie können es nicht ganz wie background-size:coverbekommen, aber ..

Dieser Ansatz ist ziemlich nahe: Er verwendet JavaScript, um zu bestimmen, ob das Bild Querformat 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 background-size: contain emulieren, konnte object-fit jedoch aufgrund fehlender Unterstützung nicht verwenden. Meine Bilder hatten Container mit definierten Abmessungen und das hat für mich funktioniert:

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

Ich habe eine einfache Lösung gefunden, um sowohl das Cover als auch das Containermodul zu emulieren. Dies ist reines CSS und eignet sich für Container mit dynamischen Bemaßungen. Außerdem wird das Bildverhältnis nicht eingeschränkt.

Wenn Sie den IE oder Edge nicht vor 16 unterstützen müssen, verwenden Sie besser die Objektanpassung.

hintergrundgröße: Cover

.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 Größe des Bildes größer ist als die angezeigte Größe. Wenn das Bild beispielsweise 500 x 500 ist, der Container jedoch nur 200 x 200 ist. Bei dieser Lösung wird das Bild auf 2000x2000 (aufgrund von min-width/min-height) verkleinert und anschließend auf 200x200 (aufgrund von transform: scale(0.1)) verkleinert.

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

hintergrundgröße: enthalten

Nach demselben Prinzip können Sie auch background-size: contain: .__ emulieren.

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

Sie könnten das Attribut 'style' verwenden, um das Hintergrundbild zum Element hinzuzufügen. Auf diese Weise rufen Sie das Bild zwar weiterhin im HTML-Format auf, können jedoch weiterhin das Verhalten von background-size: cover css verwenden:

HTML:

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

CSS:

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

So füge ich das Element background-size: cover zu Elementen hinzu, die ich dynamisch in HTML laden muss. Sie können dann fantastische CSS-Klassen wie Hintergrundposition verwenden: Zentrum. Boom

Stellen Sie beidemin-height und min-width mit display:block ein:

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

( Geige )

Vorausgesetzt, Ihr Bildelement enthält position:relative oder 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 (margin-left:-50%) oder vertikal (margin-top:-50%) überlaufen wird. Es kann möglich sein, CSS-Medienabfragen (und etwas Mathematik) zu verwenden, um dies herauszufinden.

Ich weiß, das ist alt, aber viele Lösungen, die ich oben sehe, haben ein Problem mit dem Bild/Video, das für den Container zu groß ist, so dass er nicht wie ein Cover im Hintergrundformat wirkt. Ich entschied mich jedoch für "Utility-Klassen", damit es für Bilder und Videos funktioniert. Sie geben dem Container einfach die Klasse .media-cover-wrapper und das Medienelement selbst die Klasse .media-cover 

Dann haben Sie die 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 darauf, dass Sie die Seitengröße ändern:

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 kann jQuery erforderlich sein, aber es reagiert ziemlich gut und verhält sich genau wie Hintergrundgröße: Cover. Sie können es für Bilder und/oder Videos verwenden, um diesen zusätzlichen SEO-Wert zu erhalten.

Wir können den ZOOM-Ansatz verfolgen. Wir können davon ausgehen, dass max. 30% (oder mehr bis zu 100%) der Zoomeffekt sein kann, wenn die Breite des Seitenbildes OR geringer ist als die gewünschte Höhe OR. Den restlichen nicht benötigten Bereich können wir mit Überlauf ausblenden: ausgeblendet.

.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 Höhe OR angepasst.

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

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

Mit CSS können Sie object-fit: [cover|contain]; simulieren. Es verwendet transform und [max|min]-[width|height]. Es ist nicht perfekt. Das funktioniert nicht in einem Fall: 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>

es ist mir nicht erlaubt, einen Kommentar hinzuzufügen, aber ja, was Eru Penkman getan hat, ist ziemlich genau das Richtige 

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