Как мне получить изображение, чтобы оно оставалось центрированным, когда контейнер с жидкостью (на основе процентов) слишком мал, чтобы показать весь образ?
Как центрировать изображение внутри контейнера
Это означает, что он должен показывать середину изображения вместо сторон, когда контейнер слишком мал.
У вас может быть контейнер, в котором содержится некоторый контент, такой как два <div>, которые имеют ширину 50% каждый, сидя рядом друг с другом. В этом примере мы можем проиллюстрировать только один дочерний элемент контейнера:
Мы будем называть внешний прямоугольник .container, внутренний прямоугольник .content и изображение img. Эта компоновка прекрасна, пока .content всегда шире, чем img.
Поскольку мы имеем дело с процентами и, вероятно, работаем с отзывчивым дизайном, это может быть не всегда так. Если .content всегда тоньше, чем img, произойдет обрезка:
Если самая интересная часть img находится в центре, нам нужно заставить браузер обрезать оба края равномерно - оставив большую часть его видимой, независимо от ширины .content.
К счастью, решение возможно. Более того, дополнительная разметка не требуется.
.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! */
}
Для новых браузеров вы можете перевести его
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! */
}
Если вы ожидаете, что изображение, которое будет отображаться, будет намного больше, чем контейнер отображения, установив влево: 100%; и margin-left: -200%; (от ответа Брайза) может быть недостаточно, чтобы получить центральную часть изображения. Просто поставьте больший процент для обоих. Убедитесь, что другой - половина другого, хотя.
left: 500%;
margin-left: -1000%;