Каков наилучший способ обрезать изображение с помощью CSS?

Question

Я хочу показать фотографию на моей странице, слой DIV - 500 * 500 пикселей. Я часто заменю изображение, размер изображения не уверен, может быть горизонтальная версия может быть вертикальной, возможно, 800 * 600 пикселей, может быть, 576 * 720 пикселей.

Я не хочу получать фото деформации. Как установить CSS или JS, сделайте на фото показан только центр 500 * 500 px, скройте часть вокруг.

Answer 1

Используйте фоновое изображение на DIV с предварительно определенными размерами и установите положение изображения на 50%, что по существу центрирует его. Независимо от переполняет 500x500 будет обрезано ...

#yourImageDiv { 
    background: url(../img/image.jpg) no-repeat 50%; 
    height: 500px; 
    width: 500px; 
} 

Answer 2

Один хороший трюк, чтобы использовать прозрачный PNG вместо DIV и применить стиль фона изображения к нему. Таким образом, вы можете использовать изображение, как обычно (встроенный и т. Д.), Но можете обрезать по желанию.

#cropper { 
    width: 500px; 
    height: 500px; 
    background-image: url(myBackgroundImage.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

...

<img id="cropper" src="clear.png">