Apakah ada yang setara dengan ukuran latar belakang: sampul dan isi untuk elemen gambar?

Saya memiliki situs dengan banyak halaman dan gambar latar belakang yang berbeda, dan saya menampilkannya dari CSS seperti:

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

Namun, saya ingin menampilkan gambar (layar penuh) yang berbeda pada satu halaman menggunakan <img>elemen, dan saya ingin mereka memiliki properti yang sama dengan properti di atas background-image: cover;(gambar tidak dapat ditampilkan dari CSS, mereka harus ditampilkan dari dokumen HTML).

Biasanya saya menggunakan:

div.mydiv img {
    width: 100%;
}

Atau:

div.mydiv img {
    width: auto;
}

untuk membuat gambar penuh dan responsif. Namun gambar menyusut terlalu banyak ( width: 100%) ketika layar menjadi terlalu sempit, dan menunjukkan warna latar belakang tubuh di layar bawah. Metode lain width: auto;,, hanya membuat gambar ukuran penuh dan tidak menanggapi ukuran layar.

Apakah ada cara untuk menampilkan gambar dengan cara yang background-size: coversama?

Solusi # 1 - Properti objek-fit (Tidak memiliki dukungan IE )

Hanya mengatur object-fit: cover;img.

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

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

Lihat MDN - mengenai object-fit: cover:

Konten yang diganti berukuran untuk mempertahankan rasio aspeknya sambil mengisi seluruh kotak konten elemen. Jika rasio aspek objek tidak cocok dengan rasio aspek kotaknya, maka objek akan terpotong agar pas.

Juga, lihat demo Codepen ini yang membandingkan object-fit: coverditerapkan ke gambar dengan background-size: coverditerapkan ke gambar latar belakang

Solusi # 2 - Ganti img dengan gambar latar belakang dengan 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" />

Sebenarnya ada solusi css yang cukup sederhana yang bahkan bekerja di 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>

Dengan asumsi Anda dapat mengatur untuk memiliki elemen wadah yang ingin Anda isi, ini tampaknya berfungsi, tetapi terasa agak seperti peretasan. Intinya, saya hanya menggunakan min/max-width/heightpada area yang lebih besar dan kemudian skala area itu kembali ke dimensi aslinya.

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

Saya menemukan solusi sederhana untuk meniru penutup dan isi, yang merupakan CSS murni, dan berfungsi untuk wadah dengan dimensi dinamis, dan juga tidak membuat batasan pada rasio gambar.

Perhatikan bahwa jika Anda tidak perlu mendukung IE, atau Edge sebelum 16, maka Anda lebih baik menggunakan objek-fit.

ukuran latar: penutup

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

1000% digunakan di sini jika ukuran alami gambar lebih besar dari ukuran yang ditampilkan. Misalnya, jika gambarnya 500x500, tetapi wadahnya hanya 200x200. Dengan solusi ini, gambar akan diubah ukurannya menjadi 2000x2000 (karena min-width / min-height), kemudian diperkecil menjadi 200x200 (karena transform: scale(0.1)).

Faktor x10 dapat diganti dengan x100 atau x1000, tetapi biasanya tidak ideal untuk memiliki gambar 2000x2000 yang dirender pada 20x20 div. :)

ukuran latar: mengandung

Mengikuti prinsip yang sama, Anda juga dapat menggunakannya untuk meniru 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>

Tidak , Anda tidak bisa mendapatkannya seperti background-size:cover ...

Pendekatan ini sangat dekat: menggunakan JavaScript untuk menentukan apakah gambar lanskap atau potret, dan menerapkan gaya yang sesuai.

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/

Saya perlu ditiru background-size: contain, tetapi tidak dapat digunakan object-fitkarena kurangnya dukungan. Gambar saya memiliki wadah dengan dimensi yang ditentukan dan ini akhirnya bekerja untuk saya:

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

Coba atur keduanya min-height dan min-width, dengan display:block:

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

( biola )

Asalkan elemen yang mengandung gambar Anda adalah position:relativeatau position:absolute, gambar akan menutupi wadah. Namun, itu tidak akan terpusat.

Anda dapat dengan mudah memusatkan gambar jika Anda tahu apakah itu akan meluap secara horizontal (mengatur margin-left:-50%) atau vertikal (mengatur margin-top:-50%). Dimungkinkan untuk menggunakan kueri media CSS (dan beberapa matematika) untuk mencari tahu.

Dengan CSS Anda dapat mensimulasikan object-fit: [cover|contain];. Ini digunakan transformdan [max|min]-[width|height]. Itu tidak sempurna. Itu tidak berfungsi dalam satu kasus: jika gambar lebih lebar dan lebih pendek dari wadah.

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

Apa yang dapat Anda lakukan adalah menggunakan atribut 'style' untuk menambahkan gambar latar belakang ke elemen, dengan cara itu Anda masih akan memanggil gambar dalam HTML tetapi Anda masih dapat menggunakan ukuran-latar: perilaku penutup css:

HTML:

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

CSS:

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

Inilah cara saya menambahkan ukuran latar: perilaku penutup ke elemen yang harus saya muat secara dinamis ke dalam HTML. Anda kemudian dapat menggunakan kelas css yang luar biasa seperti latar belakang-posisi: pusat. ledakan

Untuk IE Anda juga perlu memasukkan baris kedua - lebar: 100%;

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

Saya tidak diizinkan untuk 'menambahkan komentar' begitu melakukan ini, tapi ya apa yang dilakukan Eru Penkman cukup tepat, untuk mendapatkannya seperti latar belakang yang perlu Anda lakukan adalah mengubah

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

UNTUK

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

Saya tahu ini sudah tua, namun banyak solusi yang saya lihat di atas memiliki masalah dengan gambar / video yang terlalu besar untuk wadah sehingga tidak benar-benar bertindak seperti penutup ukuran latar belakang. Namun, saya memutuskan untuk membuat "kelas utilitas" sehingga akan berfungsi untuk gambar dan video. Anda cukup memberikan wadah kelas .media-cover-wrapper dan item media itu sendiri kelas .media-cover

Maka Anda memiliki jQuery berikut:

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

Saat menelepon, pastikan untuk mengatur ukuran halaman:

mediaCoverBounds();

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

Kemudian CSS berikut:

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

Ya itu mungkin memerlukan jQuery tetapi itu merespon dengan cukup baik dan bertindak persis seperti ukuran latar belakang: penutup dan Anda dapat menggunakannya pada gambar dan / atau video untuk mendapatkan nilai SEO tambahan.

Kita bisa mengambil pendekatan ZOOM. Kita dapat mengasumsikan bahwa maks 30% (atau lebih hingga 100%) dapat menjadi efek pembesaran jika tinggi gambar aspek ATAU lebar kurang dari tinggi ATAU lebar yang diinginkan. Kita dapat menyembunyikan area yang tidak diperlukan dengan overflow: disembunyikan.

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

Ini akan menyesuaikan gambar dengan lebar atau tinggi berbeda.

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

mengalami simposium yang sama persis. di atas bekerja untuk saya.