Esiste un equivalente alla dimensione dello sfondo: copertina e contiene per gli elementi dell'immagine?

Ho un sito con molte pagine e diverse immagini di sfondo e le visualizzo da CSS come:

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

Tuttavia, voglio mostrare diverse immagini (a schermo intero) su una pagina usando gli <img>elementi e voglio che abbiano le stesse proprietà della background-image: cover;proprietà sopra (le immagini non possono essere visualizzate da CSS, devono essere visualizzate dal documento HTML).

Normalmente uso:

div.mydiv img {
    width: 100%;
}

O:

div.mydiv img {
    width: auto;
}

per rendere l'immagine piena e reattiva. Tuttavia, l'immagine si restringe troppo ( width: 100%) quando lo schermo diventa troppo stretto e mostra il colore di sfondo del corpo nella parte inferiore dello schermo. L'altro metodo, width: auto;rende l'immagine a dimensione intera e non risponde alle dimensioni dello schermo.

C'è un modo per visualizzare l'immagine nello stesso modo in cui lo background-size: coverfa?

Soluzione n. 1 - La proprietà adatta all'oggetto ( manca il supporto IE )

Basta impostare object-fit: cover;su img.

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

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

Vedi MDN - per quanto riguarda object-fit: cover:

Il contenuto sostituito viene ridimensionato per mantenere le proporzioni durante il riempimento dell'intero riquadro del contenuto dell'elemento. Se le proporzioni dell'oggetto non corrispondono alle proporzioni della sua casella, l'oggetto verrà ritagliato per adattarsi.

Inoltre, vedi questa demo di Codepen che confronta object-fit: coverapplicata a un'immagine con background-size: coverapplicata a un'immagine di sfondo

Soluzione n. 2 - Sostituisci img con un'immagine di sfondo con 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" />

In realtà esiste una soluzione CSS piuttosto semplice che funziona anche su IE8:

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

Supponendo che tu possa disporre di un elemento contenitore che desideri riempire, questo sembra funzionare, ma sembra un po 'hacker. In sostanza, lo uso solo min/max-width/heightsu un'area più grande e quindi ridimensiono quell'area nelle dimensioni originali.

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

Ho trovato una soluzione semplice per emulare sia la copertina che il contenuto, che è puro CSS, e funziona per contenitori con dimensioni dinamiche, e inoltre non fa alcuna restrizione sul rapporto dell'immagine.

Nota che se non hai bisogno di supportare IE o Edge prima dei 16 anni, allora è meglio usare l'adattamento agli oggetti.

dimensione dello sfondo: copertina

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

Il 1000% viene utilizzato qui nel caso in cui la dimensione naturale dell'immagine sia maggiore della dimensione che viene visualizzata. Ad esempio, se l'immagine è 500x500, ma il contenitore è solo 200x200. Con questa soluzione, l'immagine verrà ridimensionata a 2000x2000 (a causa della larghezza minima / altezza minima), quindi ridimensionata a 200x200 (a causa ditransform: scale(0.1) ).

Il fattore x10 può essere sostituito da x100 o x1000, ma di solito non è l'ideale avere un'immagine 2000x2000 in rendering su un div 20x20. :)

dimensione dello sfondo: contenere

Seguendo lo stesso principio, puoi anche usarlo per emulare 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>

No , non puoi capirlo abbastanza background-size:cover ma ...

Questo approccio è abbastanza vicino: usa JavaScript per determinare se l'immagine è orizzontale o verticale e applica gli stili di conseguenza.

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/

Avevo bisogno di emulare background-size: contain, ma non potevo usarlo a object-fitcausa della mancanza di supporto. Le mie immagini avevano contenitori con dimensioni definite e questo ha funzionato per me:

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

Prova a impostare entrambi min-height e min-width, con display:block:

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

( violino )

A condizione che l'elemento contenente l'immagine sia position:relativeoposition:absolute , l'immagine coprirà il contenitore. Tuttavia, non sarà centrato.

Puoi centrare facilmente l'immagine se sai se trabocca orizzontalmente (imposta margin-left:-50%) o verticalmente (imposta margin-top:-50%). Potrebbe essere possibile utilizzare le query dei media CSS (e alcune matematiche) per capirlo.

Con CSS puoi simulare object-fit: [cover|contain];. È uso transforme [max|min]-[width|height]. Non è perfetto Ciò non funziona in un caso: se l'immagine è più larga e più corta del contenitore.

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

Quello che potresti fare è usare l'attributo 'style' per aggiungere l'immagine di sfondo all'elemento, in questo modo chiamerai ancora l'immagine in HTML ma sarai ancora in grado di usare la dimensione dello sfondo: cover css behavior:

HTML:

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

CSS:

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

È così che aggiungo la dimensione dello sfondo: il comportamento della copertina agli elementi che devo caricare in modo dinamico in HTML. È quindi possibile utilizzare fantastiche classi CSS come background-position: center. boom

Per IE è necessario includere anche la seconda riga - larghezza: 100%;

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

non posso 'aggiungere un commento' così facendo, ma sì quello che ha fatto Eru Penkman è praticamente perfetto, per farlo come una copertina di sfondo tutto ciò che devi fare è cambiare

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

PER

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

So che questo è vecchio, tuttavia molte soluzioni che vedo sopra hanno un problema con l'immagine / il video troppo grandi per il contenitore, quindi in realtà non si comportano come una copertina di dimensioni di sfondo. Tuttavia, ho deciso di creare "classi di utilità" in modo che funzionasse per immagini e video. È sufficiente assegnare al contenitore la classe .media-cover-wrapper e l'elemento multimediale stesso la classe .media-cover

Quindi hai il seguente 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

Quando lo chiami assicurati di occuparti del ridimensionamento della pagina:

mediaCoverBounds();

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

Quindi il seguente 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%);
}

Sì, potrebbe richiedere jQuery ma risponde abbastanza bene e si comporta esattamente come lo sfondo: copertina e puoi usarlo su immagini e / o video per ottenere quel valore SEO aggiuntivo.

Possiamo adottare l'approccio ZOOM. Possiamo supporre che un massimo del 30% (o più fino al 100%) possa essere l'effetto zoom se l'altezza dell'immagine O la larghezza dell'immagine è inferiore all'altezza O alla larghezza desiderata. Possiamo nascondere l'area non necessaria con troppo pieno: nascosto.

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

Ciò regolerà le immagini con larghezza o altezza diverse.

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

incontrato gli stessi identici symptops. sopra ha funzionato per me.