Как центрировать обрезку изображения (<img>) в контейнере ширины жидкости

Как мне получить изображение, чтобы оно оставалось центрированным, когда контейнер с жидкостью (на основе процентов) слишком мал, чтобы показать весь образ?

enter image description here

Как центрировать изображение внутри контейнера

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

Ответы

Ответ 1

Когда он работает

У вас может быть контейнер, в котором содержится некоторый контент, такой как два <div>, которые имеют ширину 50% каждый, сидя рядом друг с другом. В этом примере мы можем проиллюстрировать только один дочерний элемент контейнера: enter image description here

Мы будем называть внешний прямоугольник .container, внутренний прямоугольник .content и изображение img. Эта компоновка прекрасна, пока .content всегда шире, чем img.

Когда он прерывается

Поскольку мы имеем дело с процентами и, вероятно, работаем с отзывчивым дизайном, это может быть не всегда так. Если .content всегда тоньше, чем img, произойдет обрезка:

enter image description here

Проблема

Если самая интересная часть img находится в центре, нам нужно заставить браузер обрезать оба края равномерно - оставив большую часть его видимой, независимо от ширины .content.

enter image description here

Решение

К счастью, решение возможно. Более того, дополнительная разметка не требуется.

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Ответ 2

Для новых браузеров вы можете перевести его

figure{
    width: 100%;
    text-align: center;
    overflow: hidden;
}
img{
    position: relative;
    left: 50%;
    transform: translate(-50%,0)
}

Чтобы поддерживать IE8, вы все равно можете использовать технику, представленную выше @BryceHanscomb.

.no-csstransforms figure img {
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Ответ 3

Если вы ожидаете, что изображение, которое будет отображаться, будет намного больше, чем контейнер отображения, установив влево: 100%; и margin-left: -200%; (от ответа Брайза) может быть недостаточно, чтобы получить центральную часть изображения. Просто поставьте больший процент для обоих. Убедитесь, что другой - половина другого, хотя.

left: 500%;
margin-left: -1000%;