Чи є еквівалент розміру фону: обкладинка і містить для елементів зображення?

У мене є сайт з багатьма сторінками та різними фоновими зображеннями, і я показую їх із CSS, як-от:

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

Однак я хочу показати на одній сторінці різні зображення (на <img>весь екран) за допомогою елементів, і я хочу, щоб вони мали такі самі властивості, як і вищевказана background-image: cover;властивість (зображення не можуть відображатися з CSS, вони повинні відображатися з документа HTML).

Зазвичай я використовую:

div.mydiv img {
    width: 100%;
}

Або:

div.mydiv img {
    width: auto;
}

щоб зробити зображення повноцінним та чуйним. Однак картинка зменшується занадто сильно ( width: 100%), коли екран стає занадто вузьким, а на нижньому екрані відображається фоновий колір тіла. Інший метод, width: auto;лише робить зображення в повному розмірі і не відповідає на розмір екрана.

Чи є спосіб відобразити зображення так само, як це background-size: coverробиться?

Рішення №1 - Властивість об'єкта ( відсутність підтримки IE )

Просто встановіть object-fit: cover;на img.

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

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

Див. MDN - стосовно object-fit: cover:

Замінений вміст розміру підтримує його співвідношення сторін при заповненні всього поля вмісту елемента. Якщо співвідношення сторін об'єкта не відповідає співвідношенню сторін його поля, об'єкт буде вирізаний відповідно до розміру.

Також дивіться цю демонстраційну програму Codepen, яка порівнює object-fit: coverзастосоване до зображення із background-size: coverзастосованим до фонового зображення

Рішення №2 - Замініть img фоновим зображенням на 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" />

Насправді є досить просте рішення css, яке працює навіть на 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>

Якщо припустити, що ви можете домовитись про наявність елемента контейнера, який ви хочете заповнити, це, здається, спрацьовує, але відчуває себе трохи хакіше. По суті, я просто використовую min/max-width/heightна більшій площі, а потім масштабую цю площу в початкові розміри.

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

Я знайшов просте рішення для імітації як обкладинки, так і вмісту, що є чистим CSS, і працює для контейнерів з динамічними розмірами, а також не обмежує співвідношення зображень.

Зауважте, що якщо вам не потрібно підтримувати IE або Edge до 16, то краще використовувати об'єкт-fit.

фоновий розмір: обкладинка

.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% у випадку, якщо натуральний розмір зображення перевищує розмір, який він відображає. Наприклад, якщо зображення розміром 500x500, але контейнер - лише 200x200. За допомогою цього рішення зображення буде змінено до 2000x2000 (через мінімальну ширину / хв. Висоту), а потім зменшить до 200x200 (через transform: scale(0.1)).

Коефіцієнт x10 можна замінити на x100 або x1000, але зазвичай ідеально, щоб зображення розміром 2000x2000 було виведено на ділі 20x20. :)

фоновий розмір: містити

Дотримуючись того самого принципу, ви також можете використовувати його для емуляції 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>

Ні , ви не можете зрозуміти це як, background-size:cover але ..

Цей підхід досить проклятий: він використовує JavaScript, щоб визначити, чи зображення є пейзажним або портретним, і відповідно застосовує стилі.

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/

Мені потрібно було наслідувати background-size: contain, але не міг користуватися object-fitчерез відсутність підтримки. Мої зображення мали контейнери з визначеними розмірами, і це закінчилося для мене:

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

Спробуйте встановити і те, min-height і за min-widthдопомогою display:block:

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

( скрипка )

За умови, що елемент, який містить зображення, є position:relativeабо position:absolute, зображення накриє контейнер. Однак це не буде зосереджено.

Ви можете легко центрувати зображення, якщо знаєте, чи буде воно горизонтально переповнюватися (встановити margin-left:-50% ) чи вертикально (встановити margin-top:-50%). Можливо, можна використати медіа-запити CSS (та деякі математики), щоб зрозуміти це.

За допомогою CSS ви можете імітувати object-fit: [cover|contain];. Це використання transformі [max|min]-[width|height]. Це не ідеально. Це не спрацює в одному випадку: якщо зображення ширше і коротше контейнера.

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

Що ви можете зробити, це використовувати атрибут 'style', щоб додати фонове зображення до елемента, таким чином ви все одно будете викликати зображення в HTML, але ви все одно зможете використовувати фоновий розмір: cover css поведінку:

HTML:

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

CSS:

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

Ось так я додаю фоновий розмір: поведінка обкладинки до елементів, які мені потрібно динамічно завантажувати в HTML. Потім ви можете використовувати дивовижні класи css, такі як background-position: center. бум

Для IE вам також потрібно включити другий рядок - ширина: 100%;

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

мені не дозволяється "додавати коментар", роблячи це, але так, що зробив Еру Пенкман, це майже все на місці, щоб отримати його як фонове покриття, все, що вам потрібно зробити, - це змінити

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

ДО

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

Я знаю, що це старе, але в багатьох рішеннях, які я бачу вище, виникає проблема з тим, що зображення / відео є занадто великим для контейнера, так що насправді він не працює як фоновий розмір обкладинки. Однак я вирішив зробити «корисні класи», щоб це працювало для зображень та відео. Ви просто даєте контейнеру клас .media-cover-wrapper, а сам елемент медіа - клас .media-cover

Тоді у вас є такий 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

Зателефонувавши до цього, переконайтесь у зміні розміру сторінки:

mediaCoverBounds();

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

Потім такі 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%);
}

Так, це може зажадати jQuery, але він реагує досить добре і діє точно як фоновий розмір: обкладинка, і ви можете використовувати його для зображення та / або відео, щоб отримати додаткове значення SEO.

Ми можемо скористатися підходом до ZOOM. Ми можемо припустити, що максимум 30% (або більше до 100%) може бути ефектом масштабування, якщо висота аспекту зображення АБО ширина менше ніж потрібна висота АБО ширина. Ми можемо приховати решту непотрібної області з переливом: приховано.

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

Це дозволить налаштувати зображення з різною шириною АБО висотою.

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

стикалися з такими ж точними симпоптами. вище працював для мене.