Подтвердить что ты не робот

Мозаика изображений HTML/CSS

Я хочу сделать макет изображения с портретными изображениями внутри div с фиксированным соотношением сторон 3:2. Размер изображений 327x491px.

Основная проблема - нежелательные промежутки между изображениями. Как выравнивать изображения как мозаику, используя только HTML/CSS?

HTML:

<div id="pictures1" class="_pictures1 grid">
    <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>
    <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>
     ... SO ON ...
</div>

CSS:

._pictures1 {
    width: 935px; height: 490px;
    margin: -26px 0 0 59px;
    float: left;
    top: 20%; left: 20%;
    position: absolute;
    border: 1px gray solid;
}
._pictures1 div {position: absolute;}
._pictures1-01 {top: 0px; left: 35px;}
._pictures1-02 {top: 200px; left: 0px;}
/* ... SO ON ... */

jsfiddle

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы сделать правильный ответ, я сначала разъясню требования:

  • все изображения имеют одинаковое соотношение сторон: 3/2
  • изображения не обрезаются
  • Отсутствие пробела между изображениями
  • сделать мозаику изображений

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

Вот FANCY FIDDLE того, что вы можете достичь, и вот что это выглядит:

Mosaic of images in html/css - example layout

Первый шаг: подумайте, подумайте и подумайте

Сначала:. Чтобы сделать его простым, пусть ваши изображения могут иметь 3 размера (я изменил размер изображения на 1 пиксель, чтобы упростить вычисления):

  • большой: 328*492px
  • средний, 1/2 большой: 164*246px
  • маленький, 1/4 большого: 82*123px

Второй:. Поскольку ваши изображения - все портреты, а ваш контейнер имеет ту же высоту, что и большое изображение, вам придется работать с столбцами высотой 492px, которые могут иметь 3 ширины:

  • big: 328px wide, они могут отображать изображения всех размеров
  • medium: 328/2 = 164px wide, они могут отображать средние и маленькие изображения
  • small: 327/4 = 82px wide, они могут отображать только небольшие изображения

В-третьих: Сколько столбцов и размеры изображений? Это зависит от вас, вам придется сделать выбор в соответствии с общей шириной вашего контейнера и количеством изображений, которые вы хотите отобразить.

Но в вашей скрипке контейнер (._pictures1) имеет ширину 935px, которая будет невозможна с использованием ширины столбцов, выбранной ранее.

935/82 = 11.4024...

Ближе всего вы можете получить контейнер 82*12 = 984px.

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

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

Как я уверен, вам любопытно и хотите проверить это, вот пример макета в

Отзывчивая мозаика изображения

Следующий шаг: дизайн макета

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

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

Как я уже говорил, есть много возможностей макета (количество столбцов и размеры изображений в этих столбцах), поэтому для примера я выбрал 2 больших столбца 1 средний и 2 маленьких

328*2+164+82*2 = 984px ( = width of container so it can fit!)

Последний шаг: начните кодирование!

Вы можете увидеть результат в этом

FIDDLE

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

CSS:

#wrap {
    width:984px;
    height:492px;
}
.big_col, .medium_col, .small_col{
    height:492px;
    float:left;
}
img {
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;
}
.big_col {
    width:328px;
}
.medium_col{
    width:164px;
}
.small_col{
    width:82px;
}
.big_img img {
    width:328px;
    height:493px
}
.medium_img img {
    width:164px;
    height:246px;
}
.small_img img {
    width:82px;
    height:123px;
}

Затем разметка HTML:

<div id="wrap">
    <div class="big_col">
        <div class="small_img">
            <img src="http://www.lorempixum.com/327/491/abstract" alt="" />
            <img src="http://www.lorempixum.com/g/327/491" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        </div>
        <div class="medium_img">
            <img src="http://www.lorempixum.com/g/327/491/business" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
        <div class="small_img">
            <img src="http://www.lorempixum.com/g/327/491/food" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
            <img src="http://www.lorempixum.com/327/491/cats" alt="" />
            <img src="http://www.lorempixum.com/327/491/people" alt="" />
        </div>
    </div>
    <div class="big_col">
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
    </div>
    <div class="small_col small_img">
        <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
        <img src="http://www.lorempixum.com/327/491/nature" alt="" />
        <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
    </div>
    <div class="medium_col medium_img">
            <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />
    </div>
    <div class="small_col small_img">
            <img src="http://www.lorempixum.com/327/491/fashion" alt="" />
            <img src="http://www.lorempixum.com/327/491/nature" alt="" />
            <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />
            <img src="http://www.lorempixum.com/327/491" alt="" />
    </div>
</div>

Ответ 2

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

Ответ 3

Прежде всего, чтобы удалить пространство между изображениями, просто удалите его в '0' padding и margin.

Затем для достижения того, что вы хотите, вы можете использовать или комбинировать эти стратегии:

1) Назначьте фиксированный размер в пикселе на один из размеров: другой будет автоматически масштабироваться.

2) Вы можете рассчитать размер, который вам нужен, с помощью javascript и присвоить значение динамически. Например, с помощью рамки jQuery:

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3) Вы можете использовать css background-image для divs и background-size: cover или background-size: contain по мере необходимости, статически или динамически (w3c docs

Ответ 4

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

Собственный поток HTML обычно является способом перехода. Абсолютное позиционирование - это витаминные таблетки. Вы используете его, когда вам это нужно, но это не ваша основная пища.;)

Что бы я сделал:

  • просто поместите контейнер по желанию (по центру) и размер его ширины с процентом окна/раздела.

  • Затем вы помещаете в него свои._pictures1-xx div и размер ширины pics, используя процент от контейнера. Высота будет поддерживать коэффициент автоматически (*)

  • Затем я сделал div._pictures1-xx divs "встроенным блоком" и поплавал "влево". Затем немного div с четким "обоими" после последнего pic и закройте контейнер.

(*) напоминание: значение ширины или высоты по умолчанию - "авто", что означает любой размер, который поддерживает соотношение изображений, когда другое значение является px/%. Горизонтальные поля изначально становятся динамическими, когда определяется высота ваших фотографий, чтобы поддерживать соотношение ваших фотографий. Если вы определяете ширину и оставляете высоту автоматически, тогда высота динамическая, чтобы сохранить соотношение сторон, а поля не изменяются.

Надеюсь, это было полезно.

Ответ 5

Я хотел бы дать простое решение.

Вы можете просто поместить тег img в DIV. И вы должны применить CSS к этому завернутому DIV.

Пример кода

Вместо этого 
<img src='some_image.jpg'>
Использовать ниже структуру 
<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>


CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
}

Все изображения внутри класса .img_wrapper будут иметь правильное соотношение сторон.

Ответ 6

оберните изображение с помощью div. установите ширину и высоту для div согласно коэффициенту. Дайте только высоту для изображения. Если вы хотите, чтобы изображение занимало только пространство, им нужно использовать display: inline также

Ответ 7

Попробуйте что-то вроде этого

Стайлинг

body{
    background: black;
    width:80%;
    margin:5em auto;
    display:block;
}
.wrapper{
    background:#FFF;
    float:left;
}   

.container{
    height:476px;
    width:192px;
    display:inline-block;
    float:left;
}
.small{
    height:188px;
    width:125px;
    display:block;
    margin:0 auto;
    background:#333;
}
.medium{
    background:#666;
    width:192px;
    height:288px;
}
.large{
    height:476px;
    width:200px;
    background:#999;
    display:inline-block;
    float:left;
}

Это HTML

<div class="wrapper">
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="medium">
            <div class="medium_inner">
            </div>
        </div>
        <div class="small">
            <div class="small_inner">
            </div>
        </div>  
    </div>
    <div class="large">
        <div class="large_inner">
        </div>
    </div>
    <div class="container">
        <div class="small">
            <div class="small_inner">
            </div>
        </div>        
        <div class="medium">

            <div class="medium_inner">
            </div>
        </div>
    </div>
</div>

Ответ 8

img{
 height: auto;
 width: 50%
}

Ответ 9

aspectRatioResizeImg
Это плагин jQuery, который позволяет изменять размер изображения, сохраняя его соотношение сторон, устанавливая контейнер. По желанию контейнер может быть изменен в соответствии с соотношением сторон изображения. https://github.com/stereoactivo/jquery.resize-image-aspect-ratio

Ответ 10

По моему опыту: если вы установите только размер или или ширину (не оба), изображение будет масштабироваться соответствующим образом.