Альтернатива background-size: обложка для тегов img? - PullRequest
Новая
       40

Альтернатива background-size: обложка для тегов img?

0 голосов
/ 03 мая 2018

Я пытаюсь сделать так, чтобы <img> полностью заполнял свою оболочку, не растягивая и не изменяя пропорции изображения.

С учетом object-fit не работает для IE / Edge без полизаполнений, охватывает ли это решение все крайние случаи? 

.image-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



<div class="image-wrapper">
    <img src="*image source here*" alt="*image alt here" />
</div>

Единственные проблемы, с которыми я сталкиваюсь, это то, что изображения с очень вытянутой длиной или шириной, возможно, должны быть специально обрезаны, чтобы показать желаемый контент на фотографии ... или изменились значения положения ... в зависимости от того, как форма Контейнер имеет отношение к форме изображения.

1 Ответ

0 голосов
/ 03 мая 2018

background-size: обложка действительно будет правильным способом сделать это. 

.imgwrapper{
  background: url(images/yourimage.jpg) no-repeat center center; 
  background-size: cover;
}

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

Пример: https://www.jqueryscript.net/other/jQuery-Plugin-To-Resize-Center-An-Image-Within-Its-Container-Image-Cover.html

...