Лучший способ для автоматического изменения размера изображения пропорции?

Question

Я использую этот код для автоматического изменения размера изображения до размера окна на странице мобильного телефона:

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

Мое намерение - показать изображение в правильном размере окна на маленьких экранах и максимально 480 пикселей на больших экранах, сохраняя соотношение

Но по какой-то причине я не знаю, когда я использую этот код, текст вокруг изображения идет за ним.

Есть способ достичь этого результата, используя другой метод, такой как Java или Jquery, и избежать этой проблемы?

Answer 1

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

#content img {
    width: 100%;
    height: auto;
    max-width: 480px;
}

Answer 2

Если вы сделаете это для мобильных устройств, я бы порекомендовал изменить размер сервера, чтобы сохранить размер загружаемого файла.

Что касается текста, который идет позади, у вас есть более полный тестовый пример, показывающий фактический документ, к которому относится этот CSS?

Answer 3

Вы пробовали использовать разные таблицы стилей для разных размеров экрана?Тогда вам просто нужно написать код для каждой ситуации, а затем загрузить нужный стиль.Это также пригодится, если у вас есть другие стили, которые нужно менять в зависимости от размера.Очень полезно на мобильных сайтах.

<meta content="width=device-width, initial-scale=1.0" name="viewport">

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

CSS-трюк для конкретной таблицы стилей

Я также немного поиграл, и кажется,работать, если вы установите изображение в процентах.Я поместил один слева от текста и на 50% экрана, и он изменил размер текста и все.Если вы хотите, чтобы я опубликовал пример, просто спросите.

Answer 4

Я добавил этот код на своей странице, и он работает:

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

Answer 5

используйте @media, чтобы выполнить ручную смену для мобильного телефона, планшета или рабочего стола. Кстати, у мобильного телефона и планшета будет пейзаж и портрет. если вы используете Google Chrome для проверки, вы можете определить его лучше. Пример веб-сайта: Медиа-запросы: как настроить таргетинг на ПК, планшеты и мобильные устройства?