Отрегулируйте размеры изображения в зависимости от разрешения

Question

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

Answer 1

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

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

Тогда в css:

.imgWrapper img {
width:100%;
}

Если ваши изображения имеют одинаковую ширину и ширину в разных разделах:

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

Answer 2

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

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