Хочу обрезать изображение ровно по краям. Width и Height просто сжимают картинку. Нужно, что бы мсштаб остался прежним
1 ответ
Чтобы изображение не теряло свои пропорции при смене размера используйте 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;
Блоки можно растягивать и увидеть поведение.
-
Поставил, но изображение сжималось при выставленном Width и Height. Поставил эти значения в картинку, а не див– Alex7 апр 2021 в 12:49
-