Вот мой код jsfiddle.
<div class="gallery-thumbnail">
<a href="google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" />
</a>
</div>
.gallery-thumbnail {
display: flex;
max-width: 400px;
align-items: center;
justify-content: center;
overflow: hidden;
background: silver;
}
.gallery-thumbnail a { /* This magic makes a square, because the padding % is of the element's width. */
height: 0;
padding-bottom: 100%;
}
.gallery-thumbnail img {
position: relative;
object-fit: cover;
width: 100%;
background-color: green;
}
https://jsfiddle.net/hgw7s9qf/
Я потратил некоторое время на поиски того, как сделать элемент квадратным для всех размеров экрана, а затем еще немного времени, пытаясьустановить не совсем квадратное изображение внутри этой области.Я обнаружил, что у меня не может быть всего сразу.
Как мне сделать так, чтобы это изображение отвечало по размеру, заполняло квадрат так, как можно было бы ожидать, что object-fit: cover
будет работать, но при этом сохранит область какдинамически изменяемый размер квадрата?
Важно: мне нужно, чтобы он был отзывчивым, поэтому квадрат сжимается, как и окно, и изображение внутри тоже должно быть.