Как сделать так, чтобы img был в центре, и обрезался равномерно с каждой стороны(сверху, снизу, слева, справа)
<div style="width: 120px; height: 120px; overflow: hidden">
<img src="cat.jpg" style="width: 200px; height: 200px">
</div>
Как сделать так, чтобы img был в центре, и обрезался равномерно с каждой стороны(сверху, снизу, слева, справа)
<div style="width: 120px; height: 120px; overflow: hidden">
<img src="cat.jpg" style="width: 200px; height: 200px">
</div>
object-fit: cover;
<div style="width: 120px; height: 120px;">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 100%; height: 100%; object-fit: cover;">
</div>
object-fit
переопределяет размер картинки, а тут она задана в html
, и тогда уж я бы использовал object-fit:none
– Stranger in the Q
15 май в 11:08
В данном примере известны размеры, поэтому осталось определить отрицательные отступы.
<div style="width: 120px; height: 120px; overflow: hidden">
<img src="cat.jpg" style="width: 200px; height: 200px; display: block; margin: -40px 0 0 -40px">
</div>
Вот так можно:
img {
/* сдвиг влево и вверх на половину размера картинки */
transform: translate(-50%, -50%);
/* сдвиг вправо и вниз на половину размера враппера */
margin: 50% 0 0 50%;
}
<div style="width: 120px; height: 120px; overflow: hidden">
<img src="https://i.stack.imgur.com/JTw8O.jpg" style="width: 200px; height: 200px">
</div>
Или так, если можно менять размер картинки на оригинальный
img {
object-fit: none;
}
<div style="width: 120px; height: 120px; overflow: hidden">
<img src="https://i.stack.imgur.com/JTw8O.jpg" style="width: 200px; height: 200px">
</div>