Подтвердить что ты не робот

Есть ли эквивалент фонового размера: обложка и содержать элементы изображения?

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

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

Есть ли способ отобразить изображение так же, как background-size: cover?

4b9b3361

ОТВЕТЫ

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

Попробуйте установить как min-height, так и min-width, с display:block:

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

(fiddle)

Если ваш элемент, содержащий изображение, position:relative или position:absolute, изображение будет закрывать контейнер. Однако он не будет центрирован.

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

Ответ 6

Мне нужно было подражать 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>

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

Что вы можете сделать, так это использовать атрибут "style", чтобы добавить фоновое изображение к элементу, таким образом вы все равно будете вызывать изображение в HTML, но вы все равно сможете использовать размер фона: обложка 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. стрелы

Ответ 11

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

Ответ 12

Мы можем использовать подход 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%);
}

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

Ответ 13

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

встречались одинаковые точные симптомы. выше работал у меня.