Размер изображения на разной ширине устройства для мобильного сайта

Question

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

Answer 1

Отзывчивый дизайн - один из ответов. Вы можете прочитать больше о том, что понятие здесь http://en.wikipedia.org/wiki/Responsive_web_design

Вот очень хороший пост о создании изображений, реагирующих http://css-tricks.com/which-responsive-images-solution-should-you-use/

и, конечно же, посмотрите вокруг этого сайта;) CSS - how to make responsive images

Answer 2

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

Например:

<div id="myContainer"> 
<img id="myImage" src="myImage.jpg"> 
<div> 

Тогда ваш CSS может быть:

#myImage { width: 50%; } 

Тогда она всегда будет 50% от ширины MyContainer, что, в адаптивном дизайне, может быть 100% вашего видового экрана с максимальной шириной, установленной для настольных браузеров, или ее можно установить с помощью мультимедийного запроса CSS.

Что касается высоты, современные браузеры устройств будут устанавливать его пропорционально ширине, которая определяется.