it-roy-ru.com

Есть ли эквивалент background-size: cover и содержимого для элементов изображения?

У меня есть сайт с большим количеством страниц и различными фоновыми изображениями, и я отображаю их из 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?

167
stormpat

Решение № 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" />

288
Danield

На самом деле существует довольно простое решение 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>

27
Simon

Предполагая, что вы можете создать элемент контейнера, который хотите заполнить, это работает, но выглядит немного хакерским. По сути, я просто использую 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>

14
Ulrich Schwarz

Нет, вы не можете получить его совсем как 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/

8
roo2

Мне нужно было эмулировать 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>

2
Gus

Я нашел простое решение для эмуляции обложки и содержимого, которое является чистым CSS и работает для контейнеров с динамическими размерами, а также не накладывает никаких ограничений на соотношение изображений.

Обратите внимание, что если вам не нужно поддерживать IE или Edge до 16, то вам лучше использовать подгонку объекта.

размер фона: обложка

.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: содержит

Следуя тому же принципу, вы также можете использовать его для эмуляции 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>

2
Thiago Barcala

Что вы можете сделать, это использовать атрибут 'style', чтобы добавить фоновое изображение к элементу, таким образом, вы все равно будете вызывать изображение в HTML, но вы все равно сможете использовать поведение background-size: cover css:

HTML:

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

CSS:

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

Вот как я добавляю поведение background-size: cover к элементам, которые мне нужно динамически загружать в HTML. Затем вы можете использовать классы CSS, такие как background-position: center. бум

2
Charlie Tupman

Попробуйте установить bothmin-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 (и немного математики), чтобы понять это.

2
Jeremy

Я знаю, что это старо, однако многие решения, которые я вижу выше, имеют проблему с изображением/видео, которое слишком велико для контейнера, поэтому на самом деле не действует как крышка размера фона. Однако я решил создать «служебные классы», чтобы они работали с изображениями и видео. Вы просто передаете контейнеру класс .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, но он реагирует довольно хорошо и действует точно так же, как background-size: cover, и вы можете использовать его на изображениях и/или видео, чтобы получить дополнительную ценность для SEO.

0
Secular12

Мы можем использовать ZOOM подход. Мы можем предположить, что максимальный 30% (или больше до 100%) может быть эффектом увеличения, если ширина аспектного изображения OR ширина меньше, чем желаемая высота OR ширина. Мы можем скрыть оставшуюся ненужную область с переполнением: скрыто.

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

Это позволит настроить изображения с различной шириной OR.

0
Rehmat

Для IE вам также нужно включить вторую строку - ширина: 100%; 

.mydiv img {
    max-width: 100%;
    width: 100%;
}
0
фымышонок

С помощью 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>

0
mems

мне не разрешают «добавлять комментарии», поэтому я делаю это, но да, то, что сделал Эру Пенкман, это очень важно, чтобы получить его в качестве фона, все, что вам нужно сделать, это изменить 

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

0
Asim Ramay