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

Question

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

Есть ли способ в макете потока CSS, чтобы изображение автоматически изменялось, когда кто-то делает окно браузера меньше. Я видел это в макете html-table, и я предполагаю, что таблицы позволяют это - есть ли способ сделать это в макете потока 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% от div.
• img 50px, независимо от размера окна.

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

Answer 2

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

Answer 3

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

max-width:95%;