Расположите изображения различного размера в сетке с помощью CSS - PullRequest
Новая
       34

Расположите изображения различного размера в сетке с помощью CSS

3 голосов
/ 20 июля 2011

У меня есть серия изображений (около 100 или около того), размер которых был изменен, чтобы они поместились в фоновом окне размером 130x130. Изображения имеют ширину 130 или высоту 130. Как мне стилизовать изображение так, чтобы оно отображалось в середине поля 130px.

Этого эффекта я хочу добиться: http://i.imgur.com/LY1Ag.png

Ответы [ 4 ]

3 голосов
/ 04 августа 2011

Вот еще один метод, который имеет два основных отличия: избегает использования фоновых изображений (использование которых семантически странно, как упоминалось в Nightfirecat) и помещает изображения в неупорядоченный список. Последнее не является необходимым, но, возможно, следует лучшим рекомендациям CSS.

Я не тестировал экстенсивно, но на недавних Firefox, Chrome и IE для ПК. Мне пришлось добавить хак для IE7 на основе предложений этой страницы . Вот причина пустого <span> для каждого элемента списка.

CSS: 

<style type="text/css">
#boxes {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
 }
#boxes li {
    float: left;
    border: 1px solid #333;
    margin: 30px;
}
#boxes li div {
    position: relative;
    width: 130px;
    height: 130px;
    text-align: center;
    display: block
}
#boxes li div img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
    vertical-align: middle;
}
#boxes li div img {
  position: relative;
}
#boxes li div span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->

HTML: 

<ul id="boxes">
  <li><div><span></span><img src="wide1.jpg"></div></li>
  <li><div><span></span><img src="wide2.jpg"></div></li>
  <li><div><span></span><img src="wide3.jpg"></div></li>
  <li><div><span></span><img src="tall1.jpg"></div></li>
  <li><div><span></span><img src="wide4.jpg"></div></li>
  <li><div><span></span><img src="tall2.jpg"></div></li>
</ul>

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

1 голос
/ 03 августа 2011

Лично я бы не использовал фоновые изображения.

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

Затем с помощью jQuery или javascript добавьте класс в зависимости от высоты или ширины изображений. поэтому, если ширина 130px, добавьте класс верхнего и нижнего отступов. Если изображение имеет высоту 130, добавьте левый и правый класс заполнения.

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

1 голос
/ 20 июля 2011

Если вы используете их в качестве фона для div, все готово:

CSS: 

div.box-images div {
    float: left; /* has them left-align */
    height: 130px;
    width: 130px;
    margin: 12px; /* gives them gutters in between */
    background-position: 50% 50%; /* ensures they're centered */
    background-repeat: no-repeat;
    border: 2px solid #ccc;
}

HTML: 

<div class='box-images'>
    <div style='background-image: url(images/sample1.png);'></div>
    <div style='background-image: url(images/sample2.png);'></div>
    [etc.]
    <br style='clear: both;' />
</div>
0 голосов
/ 04 августа 2011

Хотя я тестировал только в FX, Chrome и IE9, но вы можете использовать vertical-align: middle + line-height: 130px на изображении так:

css: 

div.box {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
}

div.box img {
    vertical-align:middle;
}

html 

<div class="box">
    <img src="image1.jpg">
</div>
<div class="box">
    <img src="image2.jpg">
</div>

Я получаю небольшой толчок, когда изображение имеет ту же высоту, что и окно.Кто-нибудь еще знает почему?Вы можете увидеть это здесь: http://jsfiddle.net/9bu5Z/1/

...