0

Как сделать так, чтобы img был в центре, и обрезался равномерно с каждой стороны(сверху, снизу, слева, справа)

<div style="width: 120px; height: 120px; overflow: hidden">
  <img src="cat.jpg" style="width: 200px; height: 200px">
</div>

3 ответа 3

1

object-fit: cover;

object-fit - CSS | MDN

<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>

1
  • к сожалению object-fit переопределяет размер картинки, а тут она задана в html, и тогда уж я бы использовал object-fit:none 15 мая 2019 в 11:08
0

В данном примере известны размеры, поэтому осталось определить отрицательные отступы.

<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>
0

Вот так можно:

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.