Настройка размеров изображения в зависимости от разрешения

Я разрабатывал веб-сайт на мониторе с разрешением 1440 * 900. На странице много изображений, расположенных в виде сетки. Размеры изображений и промежутки между ними были установлены на основе монитора, который я использовал. Но когда я протестировал его на мониторе с разрешением экрана 1280 * 800, изображения показались слишком большими для экрана. (как и ожидалось)!! Может ли кто-нибудь предложить, как можно настроить размеры изображения и промежутки между ними в зависимости от разрешения экрана пользователя. Спасибо.


javascript image css screen-resolution
person sachin11    schedule 05.03.2012    source источник
comment
Вы можете использовать % для ваших измерений. Тогда у вас всегда будет одинаковое отношение размера элемента к размеру экрана.   -  person Sven Bieder    schedule 05.03.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

<div class="imgWrapper">
<img src="something.jpg">
</div>

Затем в css:

.imgWrapper img {
width:100%;
}

Если на ваших изображениях есть постоянная ширина и разная ширина в разных разделах:

добавить максимальную ширину в дополнение к ширине: 100%;

person Ben    schedule 05.03.2012

arrow_upward
1
arrow_downward

Вы можете использовать комбинацию медиа-запросов css и установки ширины изображений в css. Таким образом, для максимальной ширины экрана, равной 1440, ширина изображения css будет установлена, например, на width: 200px;. Затем для максимальной ширины экрана 1280 установите ширину изображения на что-то другое, например width:120px

Вот хороший учебник по мультимедийным запросам: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-вашеговеб-сайта/

person Ben    schedule 05.03.2012