Обрезать изображение, а не растягивать его

Question

Когда я вставляю изображение в контейнер с фиксированной шириной и высотой, изображение растягивается, чтобы соответствовать этому пространству. Есть ли способ отобразить изображение в обычном размере, но с обрезанным лишним размером?

Answer 1

Современный способ - использовать object-fit: none; (или более распространенный object-fit: cover;, если вы хотите масштабировать, но без растяжения).

img {
    object-fit: cover;
}

93% сеансов браузера поддерживают это по состоянию на март 2018 года. - Можно ли использовать?

Answer 2

<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>

Тогда в вышеупомянутом DIV вы можете играть с CSS

• ширина / высота
• фон положение

для создания различных эффектов обрезки.

Answer 3

Вы можете использовать свойство CSS clip:

#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Недостатком использования clip является то, что элемент должен быть абсолютно позиционирован и доступен только с «прямоугольной» формой.

См:

• http://www.w3schools.com/CSS/pr_pos_clip.asp
• http://www.cssplay.co.uk/menu/clip_gallery

Answer 4

Используйте это: http://www.w3schools.com/css/pr_background-position.asp

background-position: 5px 5px;

и затем установите высоту и ширину div

height: 55px;

ширина: 55px;

Answer 5

Показать как фоновое изображение