Как рассчитать ширину плавающих изображений в статье на сайте?

Question

В настоящее время я изменяю размеры изображений в статьях, используя style='width:...%', и это очень хорошо, если мы говорим об общих страницах (500-800px). Но если у нас очень широкий макет (он может быть плавным), то этот метод не так хорош.

Если у нас очень широкая страница, изображения становятся больше и требуют больше вертикального пространства, а текст статьи состоит из меньшего количества строк, поэтому текст занимает меньше вертикального пространства. Это приводит к некрасивому оформлению статьи.

Какой метод я должен использовать для расчета ширины?

Answer 1

Вы можете использовать свойства css "max-width" и / или "max-height", чтобы изображения оставались в разумном размере, сохраняя соотношение в целости (установка обоих НЕ изменит соотношение). Они используются как стили CSS "width" и "height".

Более того, вы все равно можете установить ширину явно (в процентах или абсолюте), и max-height / width все равно будет иметь приоритет при необходимости

Answer 2

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

стиль = "ширина: ...%; высота: ...%"

Также я согласен с ответом @ idanzalz - для разных устройств, где макеты разные, используйте свойства css max-width и max-height в зависимости от устройства ...