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

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

Я могу заставить изображения отображаться, но у меня проблемы с CSS.

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

Любой совет приветствуется для этого NOOB. :-)


image css grid
person user1015367    schedule 26.10.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте "выравнивание текста: по центру"; на контейнере и «отображать: встроенный блок;» на изображениях.

Должен сделать дело.

Пример: http://jsfiddle.net/SvR6Z/1/

РЕДАКТИРОВАТЬ: Добавлены способы уменьшить экран.

Чтобы изменить положение изображений на странице в зависимости от ширины окна, вы можете сделать следующее:

  1. Укажите теги с относительными размерами. Например, с «шириной: 80%;» ширина страницы всегда будет составлять 80% от родительского контейнера (если родительский контейнер является телом, то он будет составлять 80% от ширины окна). По умолчанию элемент блочного уровня имеет ширину 100%; Если вы не хотите, чтобы оно было больше некоторого значения, вы можете указать для этого свойство max-width. Элемент с: «ширина: 100%; максимальная ширина: 906 пикселей;» всегда будет иметь ширину 960 пикселей или меньше, независимо от размера окна.

  2. Если вы хотите иметь больший контроль над сеткой и оформлением для мобильных средств просмотра (например, некоторые элементы), вы можете использовать мультимедийные запросы css (подробнее о них читайте здесь: http://css-tricks.com/6731-css-media-queries/ ), чтобы сделать это. Например, если вы свяжете css со страницей таким образом, он будет работать только тогда, когда ширина окна больше 701 пикселей и меньше 900 пикселей:

    <link rel='stylesheet' media='screen
      and (min-width: 701px) 
      and (max-width: 900px)' href='css/medium.css' />
person Alexey Ivanov    schedule 26.10.2011
comment
О да. Большое спасибо. Это было полезно. Вы знаете, как сделать эту сетку отзывчивой? В том числе, как уменьшить изображения при уменьшении размера экрана? - person user1015367; 27.10.2011
comment
Отредактировал ответ, чтобы добавить примеры. - person Alexey Ivanov; 27.10.2011
comment
Спасибо еще раз. Это было очень полезно! - person user1015367; 15.11.2011