Có tương đương với kích thước nền: che và chứa các yếu tố hình ảnh không?

Tôi có một trang web có nhiều trang và hình nền khác nhau và tôi hiển thị chúng từ CSS như:

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

Tuy nhiên, tôi muốn hiển thị các hình ảnh (toàn màn hình) khác nhau trên một trang bằng <img>các yếu tố và tôi muốn chúng có các thuộc tính giống như thuộc tính trên background-image: cover;(hình ảnh không thể được hiển thị từ CSS, chúng phải được hiển thị từ tài liệu HTML).

Thông thường tôi sử dụng:

div.mydiv img {
    width: 100%;
}

Hoặc là:

div.mydiv img {
    width: auto;
}

để làm cho hình ảnh đầy đủ và đáp ứng. Tuy nhiên, hình ảnh thu nhỏ quá nhiều ( width: 100%) khi màn hình quá hẹp và hiển thị màu nền của cơ thể ở màn hình dưới cùng. Phương pháp khác width: auto;, chỉ làm cho hình ảnh có kích thước đầy đủ và không đáp ứng với kích thước màn hình.

Có cách nào để hiển thị hình ảnh giống như vậy background-size: coverkhông?

Giải pháp số 1 - Thuộc tính phù hợp với đối tượng ( Thiếu hỗ trợ IE )

Chỉ cần đặt object-fit: cover;trên img.

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

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

Xem MDN - về object-fit: cover:

Nội dung được thay thế có kích thước để duy trì tỷ lệ khung hình của nó trong khi điền vào toàn bộ hộp nội dung của phần tử. Nếu tỷ lệ khung hình của đối tượng không khớp với tỷ lệ khung hình của hộp, thì đối tượng sẽ được cắt bớt cho phù hợp.

Ngoài ra, hãy xem bản demo Codepen này so sánh object-fit: coverđược áp dụng cho hình ảnh background-size: coverđược áp dụng cho hình ảnh nền

Giải pháp số 2 - Thay thế img bằng hình nền bằng 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" />

Thực sự có một giải pháp css đơn giản thậm chí hoạt động trên 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>

Giả sử bạn có thể sắp xếp để có một phần tử container bạn muốn điền, điều này có vẻ hoạt động, nhưng cảm thấy một chút hackish. Về bản chất, tôi chỉ sử dụng min/max-width/heighttrên một khu vực lớn hơn và sau đó thu nhỏ khu vực đó trở lại kích thước ban đầu.

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

Tôi đã tìm thấy một giải pháp đơn giản để mô phỏng cả bìa và chứa, đó là CSS thuần túy và hoạt động cho các thùng chứa có kích thước động và cũng không thực hiện bất kỳ hạn chế nào đối với tỷ lệ hình ảnh.

Lưu ý rằng nếu bạn không cần hỗ trợ IE hoặc Edge trước 16, thì tốt hơn bạn nên sử dụng tính năng phù hợp với đối tượng.

kích thước nền: bìa

.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% được sử dụng ở đây trong trường hợp kích thước tự nhiên của hình ảnh lớn hơn kích thước mà nó đang được hiển thị. Ví dụ: nếu hình ảnh là 500x500, nhưng container chỉ có 200x200. Với giải pháp này, hình ảnh sẽ được thay đổi kích thước thành 2000x2000 (do chiều rộng tối thiểu / chiều cao tối thiểu), sau đó thu nhỏ xuống 200x200 (dotransform: scale(0.1) ).

Yếu tố x10 có thể được thay thế bằng x100 hoặc x1000, nhưng thường không lý tưởng khi có hình ảnh 2000x2000 được hiển thị trên div 20x20. :)

kích thước nền: chứa

Theo nguyên tắc tương tự, bạn cũng có thể sử dụng nó để mô phỏng 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>

Không , bạn không thể có được nó khá thích background-size:cover nhưng ..

Cách tiếp cận này khá gần gũi: nó sử dụng JavaScript để xác định xem hình ảnh là phong cảnh hay chân dung và áp dụng các kiểu phù hợp.

Mã não

 $('.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/

Tôi cần phải thi đua background-size: contain, nhưng không thể sử dụng object-fitdo thiếu sự hỗ trợ. Hình ảnh của tôi có các thùng chứa với kích thước được xác định và điều này đã kết thúc với tôi:

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

Hãy thử đặt cả hai min-height và min-width, với display:block:

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

(câu đố )

Với điều kiện phần tử chứa hình ảnh của bạn là position:relativehoặc position:absolute, hình ảnh sẽ bao phủ vùng chứa. Tuy nhiên, nó sẽ không được tập trung.

Bạn có thể dễ dàng căn giữa hình ảnh nếu bạn biết liệu nó sẽ tràn theo chiều ngang (bộ margin-left:-50%) hay chiều dọc (bộ margin-top:-50%). Có thể sử dụng các truy vấn phương tiện CSS (và một số toán học) để tìm ra điều đó.

Với CSS bạn có thể mô phỏng object-fit: [cover|contain];. Đó là sử dụng transformvà [max|min]-[width|height]. Nó không hoàn hảo. Điều đó không hoạt động trong một trường hợp: nếu hình ảnh rộng hơn và ngắn hơn container.

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

Những gì bạn có thể làm là sử dụng thuộc tính 'style' để thêm hình nền vào thành phần, theo cách đó bạn vẫn sẽ gọi hình ảnh trong HTML nhưng bạn vẫn có thể sử dụng hành vi kích thước nền: cover css:

HTML:

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

CSS:

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

Đây là cách tôi thêm kích thước nền: hành vi che cho các yếu tố mà tôi cần tải động vào HTML. Sau đó, bạn có thể sử dụng các lớp css tuyệt vời như nền-vị trí: trung tâm. bùng nổ

Đối với IE, bạn cũng cần bao gồm dòng thứ hai - chiều rộng: 100%;

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

Tôi không được phép 'thêm một bình luận' vì vậy làm điều này, nhưng phải, những gì Eru Penkman đã làm là khá nhiều, để có được nó như nền tảng tất cả những gì bạn cần làm là thay đổi

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

ĐẾN

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

Tôi biết điều này đã cũ, tuy nhiên nhiều giải pháp tôi thấy ở trên có vấn đề với hình ảnh / video quá lớn so với vùng chứa nên không thực sự hoạt động như bìa kích thước nền. Tuy nhiên, tôi quyết định tạo "lớp tiện ích" để nó hoạt động cho hình ảnh và video. Bạn chỉ cần cung cấp cho vùng chứa lớp .media-cover-Wrapper và chính mục phương tiện là lớp .media-cover

Sau đó, bạn có jQuery sau đây:

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

Khi gọi, hãy đảm bảo thay đổi kích thước trang:

mediaCoverBounds();

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

Sau đó, CSS sau:

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

Vâng, nó có thể yêu cầu jQuery nhưng nó đáp ứng khá tốt và hoạt động chính xác như kích thước nền: bìa và bạn có thể sử dụng nó trên hình ảnh và / hoặc video để có thêm giá trị SEO.

Chúng ta có thể thực hiện phương pháp ZOOM. Chúng tôi có thể giả định rằng tối đa 30% (hoặc nhiều hơn tới 100%) có thể là hiệu ứng thu phóng nếu chiều cao hình ảnh khía cạnh HOẶC chiều rộng nhỏ hơn chiều cao HOẶC chiều rộng mong muốn. Chúng ta có thể ẩn phần còn lại không cần thiết với tràn: ẩn.

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

Điều này sẽ điều chỉnh hình ảnh với chiều rộng HOẶC chiều cao khác nhau.

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

gặp phải triệu chứng chính xác. ở trên làm việc cho tôi.