CSS Fluid макет и изображения

Question

Я пытаюсь создать полностью плавный макет в CSS (все в%), который бы без проблем работал на всех платформах (настольных ПК / мобильных устройствах / планшетах, таких как iPad).

С помощью Fluid Layouts изображение может бытьсделано полностью жидким?Например:

img { max-width:100%; }

• Означает ли это, что он будет корректироваться / соответствовать любому экстенту или размеру окна?
• Также это может применяться и к фоновым изображениям?
• Есть ли у этого свойства какие-либо ограничения с точки зрения реализации браузера или чего-либо еще?

Answer 1

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

Его нельзя применять к фоновым изображениям, поскольку само фоновое изображение выложено мозаикой или расположено в соответствии с его исходным размером. Трюк max-width в основном полезен для изображений с содержимым, а не для макетов или стилей изображений.

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

Answer 2

Ваш код означает размер изображения относительно ширины его родителя.Итак, допустим, что div, в котором находится изображение, имеет ширину 500 пикселей, тогда изображение может иметь максимальную ширину 500 пикселей или меньше, но не больше.для получения дополнительной информации о max-width: W3.org max-width

Для фонов это работает немного по-другому, вы можете использовать background-size: x y; для этого.Это CSS3 и не поддерживается старыми браузерами.для получения дополнительной информации о размере фона: Размер фона W3.org