Как создать сетку изображений, которая масштабируется

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

https://jsfiddle.net/x2wqup0e/1/

<div class="wrapper"> 
    <div class="tile col-1"> 
    <img class="thumb" src="http://www.placehold.it/200x250"> 
    </div> 
    <div class="tile col-5"> 
    <img class="thumb" src="http://www.placehold.it/1000x250"> 
    </div> 
    <div class="tile col-2"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-4"> 
    <img class="thumb" src="http://www.placehold.it/800x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/600x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/600x250"> 
    </div> 
    <div class="tile col-2"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-2"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-2"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
</div> 



.col-1 { 
    width: 16.5%; 
    box-sizing: border-box; 
} 

.col-2 { 
    width: 33.3%; 
    box-sizing: border-box; 
} 

.col-3 { 
    width: 50.0%; 
    box-sizing: border-box; 
} 

.col-4 { 
    width: 66.6%; 
    box-sizing: border-box; 
} 

.col-5 { 
    width: 83.3%; 
    box-sizing: border-box; 
} 

.tile { 
    float: left; 
    padding: 5px; 
} 

.thumb { 
    width: 100%; 
    height: auto; 
}

Редактировать # 1 - я удалил отступы между каждой плиткой, так что теперь плитки правильно масштабированием при сохранении их пропорции и высоты. Тем не менее, я потерял промежуток между каждой плитой, которая создает эффект сетки: https://jsfiddle.net/dcgf2coq/1/

источник

2016-02-26 Jon

поскольку активы имеют разную ширину, высота всегда будет меняться, как только ширина изменяется (так как мы должны поддерживать соотношение сторон) – RRR

@RRR Есть в любом случае, чтобы сделать это так что высоты каждого '.tile' остаются неизменными, даже если пропорции немного отличаются? – Jon

Соотношение сторон будет зависеть ... вы можете попробовать установить '.thumb { width: 100%; высота: 100%; } 'не уверены в его праве делать это – RRR

Пожалуйста, попробуйте это, я думаю, это ваша потребность?

<div class="wrapper"> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/200x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/1000x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/800x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/600x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/600x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
    <div class="tile col-3"> 
    <img class="thumb" src="http://www.placehold.it/400x250"> 
    </div> 
</div>

Css:

.tile { 
    float: left; 
    padding: 5px; 
}

источник

2016-02-26 10:27:57

Как создать сетку изображений, которая масштабируется

ответ

Смежные вопросы