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

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

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

Мое намерение состоит, чтобы показать изображение в нужный размер окна на маленьких экранах и не более 480px на больших экранах поддерживая соотношение.

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

Theres способ достижения этого результата с использованием другого метода, такого как Java или JQuery, и избежать этой проблемы?

источник

2011-01-19 Evel

Является ли текст в том же div, что и ваше изображение? Если это переместить его в отдельный div. Также убедитесь, что ваш образ div не совсем позиционирован или подобен, если вы не учитываете его изменяющийся размер. – locka

вы можете создать живой пример на jsbin.com? – Sotiris

Cant, его внутри приложения Android, которое получает данные из моей rss-ленты. Могу ли я создать javascript, который помещает все изображения в теги div, чтобы сделать разделение?

? – Evel

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

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

источник

2011-01-19 15:04:17

очень сложно показать, потому что он внутри приложения feed.nu. – Evel

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

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

источник

2011-04-09 20:57:40 prasanthspushpa

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

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

источник

2011-09-24 13:47:23

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

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

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

CSS trick for specific style sheet

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

источник

2012-03-06 20:38:49 CDStMichael

Использование @media для ручной смены мобильного телефона, планшета или рабочего стола. Кстати, у мобильного и планшета будет пейзаж и портрет. если вы используете Google Chrome для проверки, вы можете определить его лучше. образец веб-сайта: Media Queries: How to target desktop, tablet and mobile?

источник

2016-05-10 03:18:52 ChengWan

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

ответ

Смежные вопросы