Изображения жидкости (с использованием max-width = "100%") с родительским элементом на основе px?

Я пытаюсь использовать жидкие изображения для реагирующего проекта, над которым я работаю. Тем не менее, все, что я видел, просто сказал мне установить максимальную ширину для изображений, и она должна работать. Он работает, за исключением ширины контейнеров на основе пикселей, как показано здесь: http://codepen.io/anon/pen/cCfsF

Возможно ли, чтобы родители, основанные на px, имели жидкие изображения?

Мой код HTML:

<div>
</div>
<div>
</div>

и мой CSS:

.container { width: 500px; background: #f30;
}
.container2 { width: 100%; background: #f30;
}
img { max-width: 100%;
}
1 ответ

В вашем примере .container имеет фиксированную ширину 500 пикселей, а дочерние изображения имеют ширину 100%, поэтому изображение будет масштабироваться, чтобы соответствовать родительскому контейнеру. Однако, поскольку .container имеет фиксированную ширину, он не будет меняться при сжатии или расширении окна.

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

Вы видите правильное поведение, поэтому короткий ответ на ваш вопрос - нет, по крайней мере, для макета, на который вы смотрите.

licensed under cc by-sa 3.0 with attribution.