1

Хочу обрезать изображение ровно по краям. Width и Height просто сжимают картинку. Нужно, что бы мсштаб остался прежним

2
  • object-fit в помощь
    – andreymal
    7 апр 2021 в 12:28
  • Какое мне нужно значение поставить для обрезки?
    – Alex
    7 апр 2021 в 12:32

1 ответ 1

2

Чтобы изображение не теряло свои пропорции при смене размера используйте object-fit

Для изменения "позиции" используйте object-position, по дефолту значение center center;

Пример:

body {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.resize {
  display: block;
  min-width: 50px;
  width: 250px;
  max-width: 250px;
  min-height: 50px;
  height: 250px;
  max-height: 250px;
  border: 1px solid red;
  box-sizing: border-box;
  overflow: hidden;
  resize: both;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}
<div class="resize">
  <img src="//i.imgur.com/biWjJAg.png">
</div>

<div class="resize">
  <img src="//i.imgur.com/biWjJAg.png" style="object-fit: cover;">
</div>

Слева блок без object-fit, справа с object-fit: cover;

Блоки можно растягивать и увидеть поведение.

2
  • Поставил, но изображение сжималось при выставленном Width и Height. Поставил эти значения в картинку, а не див
    – Alex
    7 апр 2021 в 12:49
  • Оно уменьшается в размерах, а не обрезается
    – Alex
    7 апр 2021 в 12:54

Ваш ответ

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

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