Автоматическое изменение размера изображения в макете потока CSS для имитации макета html-таблицы.

Question

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

Есть ли способ в макете потока CSS автоматически изменять размер изображения, когда кто-то уменьшает окно браузера.Я видел, как это было сделано в макете html-таблицы, и я предполагаю, что таблицы делают это возможным - есть ли способ сделать это в макете потока CSS?

Answer 1

Быстрый тест показывает, что это:

<img class="test" src="testimage.jpg" />

в сочетании с:

img.test { width: 50%; }

Изменяет размеры так, как вы, вероятно, захотите.Изображение корректно изменило размер до 50 % ширины содержащего его поля, а также изменило размер по вертикали, сохранив соотношение сторон.

Что касается изменения размера на основе вертикальных изменений, оно работает не так, как хотелось бы, по крайней мере, не всегда.Я пытался:

img.test { height: 50%; }

В текущем Google Chrome (2.0.172) его размер изменяется несколько непоследовательно;размер правильный, но не обновляется после каждого перетаскивания окна.В текущем Firefox (3.5) высота, похоже, полностью игнорируется.У меня нет последних версий IE, Safari и т. д. для тестирования.Не стесняйтесь редактировать эти результаты.Даже если они преуспевают, вероятно, этого следует избегать и придерживаться ширины.

РЕДАКТИРОВАТЬ:Чтобы это работало, все элементы, содержащие img.test, должны иметь процентный размер, а не статический.

Подумайте об этом так:

• тело составляет 100% размера окна.
• img занимает 50% тела.
• img составляет 50% размера окна.

Теперь предположим, что я добавляю div.так...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

Затем

• тело составляет 100% размера окна.
• div равен 100 пикселей, игнорируя ширину тела.
• img составляет 50% от div.
• img имеет размер 50 пикселей независимо от размера окна.

Если div имеет ширину:100%», то логика работает так же, как и раньше.Если это некоторый процент, а не фиксированный, вы можете поиграть с процентом в img и добиться нужного размера.

Answer 2

Немного догадаюсь, так как мой CSS - мусор, но поскольку никто не отвечает, как насчет установки% ширины или высоты или того и другого в изображении, чтобы оно составляло процент от его родительского элемента.Не знаю?

Answer 3

Попробуйте установить максимальную ширину примерно на 95%.Спасибо, что изображение будет уменьшаться, когда ширина контейнера меньше ширины изображения.Все родительские контейнеры необходимо будет настроить.

max-width:95%;