Установка пропорциональной ширины изображения для изменения размера браузера
-
12-09-2019 - |
Вопрос
Если у меня есть изображение в сочетании со стилем:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
Размер изображения изменяется до 50 % ширины содержащего его поля, а также изменяется по вертикали, сохраняя соотношение сторон.
Кажется, для этого требуется, чтобы включающий DIV был установлен на определенное значение ширины и высоты.Но если вы хотите, чтобы размер окружающего DIV автоматически изменялся при перетаскивании браузера меньше или больше, не будет ли это проблемой?
Решение
Я уточнил свой ответ на ваш оригинальный вопрос.Пойдите, посмотрите и посмотрите, прояснит ли это ситуацию.Более или менее, если вы хотите, чтобы размер изображения изменялся вместе с окном, которое вы не мочь установите для DIV фиксированную ширину и высоту.DIV также должен иметь ширину и высоту %.
Другие советы
Вам нужно будет вручную указать width
и height
свойства, чтобы изображение сохраняло свои размеры.Это не будет слишком сложно, если вы используете серверное кодирование (PHP/ASP).
Другой способ сделать это — использовать JavaScript для динамического расчета и изменения размера изображения.
Нет, изображение по-прежнему будет занимать 50% элемента div, и если элемент div составляет часть страницы, это не имеет значения.
Все пропорции:Охватывающий div может занимать 2/3 всего окна, а изображение будет занимать 1/2 от этого.Все это рассчитывается перед отображением, просто куча вычислений.;Д