可以使用css或bootstrap创建具有不同大小图像的图像网格吗?
问题描述:
我在CSS独创一格与下面的代码不同大小的图像:可以使用css或bootstrap创建具有不同大小图像的图像网格吗?
.wrapper{
width: 100%;
margin: 0px auto;
display: inline-block;
text-align:center;
padding: 25px 40px;
max-height: 190px;
margin: 0px auto;
min-height: 200px;
}
.table-center{
padding-top: 15px;
}
/* Image Classes*/
.image-box{
max-width: 250px;
max-height: 150px;
/*float: left;*/
display: inline-block;
padding: 0px 40px 30px 40px;
}
My images when I resize the window to roughly 1200px
我把不同大小的所有图像转换为图像框,一切工作得很好,直到我调整浏览器。谁能提供更好的解决方案?一个人会对每一个尺寸都有反应吗?
答
完整的jsfiddle或codepen例子是更有益的,但我可以说:
尝试使用Flexbox的替代:
.image-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
答
您需要使用@media
查询。了解它们here。
基本上,您可以设置不同的屏幕分辨率断点不同尺寸:
@media (max-width: 600px) {
.image-box{
max-width: 150px;
max-height: 50px;
}
}
@media (max-width: 1000px) {
.image-box{
max-width: 250px;
max-height: 150px;
}
}
etc...
+0
是的我非常精通媒体查询,我希望避免它们,因为错误只发生在1000px和1200px之间,但它看起来像这可能是一个不错的选择。谢谢。 –
+0
啊...是的,不幸的是那里是唯一真正的选择 – sn3ll
我希望很快但不幸的是学会柔性盒上彼此顶部对齐只是一切上面的代码一行。 –
对不起,我看不到你的整个例子,或者我可以使它工作,并帮助你这样。否则,我会去上面的答案,并使用媒体查询 – StefanBob