Как скрыть это изображение за контейнером?

Чтобы иметь отзывчивый дизайн, я сделал это <img>, чтобы иметь max-width:37%;. Но когда я открываю окно jsFiddle достаточно далеко, чтобы сделать его достаточно широким, изображение распространяется на его размер контейнеров и больше не будет соответствовать.Как скрыть это изображение за контейнером?

Это скриншот я сделал:

enter image description here

Но я хочу, накладывающиеся стороны не будут показаны, как это (фото отредактированы):

enter image description here

Если вы хотите чтобы увидеть его в действии, use my fiddle.

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

источник

2015-04-15 Trollwut

Я предполагаю, что вы хотите, чтобы все изображение оставалось видимым. Итак, вам нужно установить max-height на 100%.

.mbox img { 
    max-height: 100%; 
    max-width: 37%; 
    position: absolute; 
    right: 0; 
    z-index: -1; 
}

Адрес jsfiddle.

Обновление: Поскольку вы хотите, чтобы изображение сохраняло max-width:37%, вам нужно скрыть часть с переполненным потоком.

Я добавил div, который обертывает div.mbox_content и img. Я дал этому div класс mbox_wrapper. Вы также должны добавить свойство z-index:2 к <h2>.

.mbox_wrapper { 
    overflow:hidden; 
    position:relative; 
} 

.mbox h2 { 
    z-index:2; 
}

Информация обновлена jsfiddle.

источник

2015-04-15 12:57:38

Это «ОК» решение, но не так как я имел в виду: Stretch она открыта для широкого экрана 1920px: Теперь изображение немного мала. После открытия окна изображение меняет размер до максимальной ширины. Изображение перемещается. Я просто хотел, чтобы это было «не видно, где заканчивается ящик». :) – Trollwut

Вы имеете в виду, что хотите в ширину 1920 пикселей, пользователь должен просмотреть часть изображения? –

Nonono. Пользователь должен просто быть 'max-width: 37%', который является шириной «поля, в котором находится изображение». Теперь, если длина изображения больше, чем поле в закрытом состоянии, тогда это перекрывающееся изображение просто должно быть разрезано. – Trollwut

вам необходимо применить тег max-height к css .. Тогда изображение не сможет превышать высоту содержащего div.

max-height: 100%;

источник

2015-04-15 12:58:57 DGTLSS

Как я уже прокомментировал Тасос: Это было бы «нормально».Но если у вас более широкий экран, изображение в закрытом состоянии небольшое, а затем при изменении окна изменяется до максимальной ширины. Я просто хотел, чтобы изображение оставалось таким, каким оно есть, но не видно, где оно больше границ. – Trollwut

Просто нужно изменить свойство Z-индекс

источник

2015-04-15 12:59:23

Как скрыть это изображение за контейнером?

ответ

Смежные вопросы