我试图制作一个响应式网格,其盒子的高度相同但长度各不相同。 这些盒子需要填充图片,保持正确的比例而不会拉伸(例如图像尺寸:400x400,600x400,800x400,......)。
我尝试了几件事:
我正在寻找纯CSS解决方案。
这可能吗? (针对flexbox / css-frameworks问题的其他方法或解决方案)
答案 0 :(得分:0)
看看这个......
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.container {
text-align: justify;
}
.container > div {
display: inline-block;
vertical-align: top;
*display: inline;/*for ie*/
zoom: 1;
}
.container:after {
content: "";
width: 100%;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div><img src="http://placehold.it/100x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/50x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/200x100&text=placehold.it+rocks!/"></div>
<div><img src="http://placehold.it/150x100&text=placehold.it+rocks!/"></div>
</div>
</body>
</html>