Div поддерживает исходный размер изображения без растяжения / переполнения - PullRequest
Новая
       33

Div поддерживает исходный размер изображения без растяжения / переполнения

0 голосов
/ 06 сентября 2018

У меня есть HTML-страница, подобная этой: 

<html>
<head>

<style>
.main {
max-width:500px;
min-height:500px;
margin:auto;
}
.image-container {
width:100%;
background-color:black;
min-height: 200px;
height:300px;
}
img {
  object-fit: contain;
  height:200px;
}

</style>

</head>
<body>
<div class="main">
<div class="image-container">
<img src="https://i.gyazo.com/3a4b9b23d8d1a179b75472d58bc55fe3.jpg" style="width:100%"/>
</div>
</div>
</body>
</html>

этот объект идеально подходит для Google Chrome и Firefox, но, к сожалению, не для IE. Я не хочу использовать в качестве фонового изображения, так как я буду использовать это изображение в карусели в будущем? Есть ли альтернатива, чтобы я поместил изображение в div с фиксированной высотой без растяжения и переполнения? Отмечено: Подгонка объекта: содержат отлично служат моим требованиям, но не удалось в IE.

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Таким образом, вы используете подгонку объекта следующим образом: 

.post__featured-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
 }

Это скопирует источник нашего изображения в фоновое изображение источника контейнера. Далее мы немного изменим наш SCSS: 

.post {
 &__image-container {
  width: 120px; // the same width and height as for the <img>
  height: 120px;
  &.compat-object-fit {
   background-size: cover;
   background-position: center center;
   .post__featured-image { // hide image if object fit is not supported - opacity to 0 for the link area
    opacity: 0;
   }
  }
 }
 &__featured-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
 }
}
0 голосов
/ 06 сентября 2018

Используйте Модернизр. 

if ( ! Modernizr.objectfit ) {
    $('.post__image-container').each(function () {
        var $container = $(this),
        imgUrl = $container.find('img').prop('src');
        if (imgUrl) {
          $container
            .css('backgroundImage', 'url(' + imgUrl + ')')
            .addClass('compat-object-fit');
        }  
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...