Установка пропорциональной ширины изображения для изменения размера браузера

Question

Если у меня есть изображение в сочетании со стилем:

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

img.test { width: 50%;}

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

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

Answer 1

Я уточнил свой ответ на ваш оригинальный вопрос.Пойдите, посмотрите и посмотрите, прояснит ли это ситуацию.Более или менее, если вы хотите, чтобы размер изображения изменялся вместе с окном, которое вы не мочь установите для DIV фиксированную ширину и высоту.DIV также должен иметь ширину и высоту %.

Answer 2

Вам нужно будет вручную указать width и height свойства, чтобы изображение сохраняло свои размеры.Это не будет слишком сложно, если вы используете серверное кодирование (PHP/ASP).

Другой способ сделать это — использовать JavaScript для динамического расчета и изменения размера изображения.

Answer 3

Нет, изображение по-прежнему будет занимать 50% элемента div, и если элемент div составляет часть страницы, это не имеет значения.

Answer 4

Все пропорции:Охватывающий div может занимать 2/3 всего окна, а изображение будет занимать 1/2 от этого.Все это рассчитывается перед отображением, просто куча вычислений.;Д