Автоматическое изменение размера изображения в макете потока 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 и т. Д. Для тестирования. Не стесняйтесь редактировать в этих результатах. Даже если те преуспевают, вероятно, это то, чего вы хотите избежать, и придерживайтесь ширины.

EDIT: Чтобы это работало, все элементы, содержащие img.test, должны иметь размеры в процентах, а не статически.

Думайте об этом так:

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

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

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

Тогда

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

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

Answer 2

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

Answer 3

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

max-width:95%;