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

Question

Я пытаюсь сделать <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>

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

Answer 1

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

.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