Если у меня есть изображение с div, обернутым вокруг него, как мне сделать так, чтобы оно показывало только определенную часть изображения?

Question

Если у меня есть изображение с div, обернутым вокруг него, как мне сделать так, чтобы оно показывало только определенный участок изображения?

<div id=#container"><img src="hello.jpg" /></div>

Допустим, я хочу, чтобы изображение отображало только ширину 200 пикселей и высоту 200 пикселей. Я также хочу, чтобы он начал показывать 10 пикселей сверху и 30 пикселей слева.

Answer 1

Вы можете поместить его как фоновое изображение для div, сделать его блоком с заданной шириной / высотой и использовать background-position, чтобы получить желаемую позицию.

Answer 2

Если ваш <div id="#container"> абсолютно позиционирован, вы можете использовать свойство clip:

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

Приведенное выше создаст прямоугольный клип с верхним левым углом 10 пикселей сверху и 30 пикселей слева. Его нижний правый угол составляет 210 пикселей сверху и 230 пикселей слева (что дает вам 200 пикселей ширины и высоты).

Подробнее об этом можно прочитать в этой статье .

Answer 3

#container {
    width: 200px;
    height: 200px;
    overflow: hidden
}
#container img {
    margin: -10px 0 0 -30px
}

Answer 4

#container {
    padding-top  : 10px;
    padding-left : 30px;

}
#container img {
    width        : 200px;
    height       : 200px;
}

Изображение не будет растягиваться:

#container img {
    max-width    : 200px;
    max-height   : 200px;
}