Основанный на существующем ответе, мне удалось центрировать обрезку изображения. Тем не менее, у меня возникли проблемы с тем, чтобы улучшить изображение в центре.
Вопрос
Когда я уменьшаю размер окна веб-браузера, центральное обрезанное изображение не масштабируется красиво. Вместо этого он поддерживает фиксированные height
и width
и выливается из порта просмотра. Проблема, возможно, более четко продемонстрирована с помощью Fiddle.
Как я могу сделать масштабирование изображения в центре? В идеале изображение с обрезанным центром будет красиво уменьшаться, все еще обрезанное и поддерживающее аналогичное соотношение сторон.
.centered-container {
max-width: 960px;
margin: auto;
}
.center-cropped-img {
width: 640px;
height: 360px;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
.center-cropped-img img {
position: absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
<div class="centered-container">
<div class="center-cropped-img">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="center-cropped-img">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
</div>