所以我有一排图像是响应式布局的一部分。容器从边缘到边缘形成。唯一有问题的区域似乎是这些图像在屏幕扩展并再次缩小时会扭曲。有没有真正的解决方案来处理这个问题。我必须补充说,图像是用PHP加载的所以我不知道;我认为我有选择唱背景图像?那当然是理想的。
我试图保留图像的比例而不会在高度或宽度上扭曲,但我似乎无法达到这个目的?
/******* gallery *******/
.gallery{
width: 100%;
background-color: #D2D7D3;
height: auto;
overflow:auto;
}
.gallery img{
width: 100%;
height: 100%;
}
.gallery_col1{
width: 20%;
height: 150px;
background-color: #BFBFBF;
float: left;
}
.gallery_col2{
width: 20%;
height: 150px;
background-color: #BFBFBF;
float: left;
}
.gallery_col3{
width: 20%;
height: 150px;
background-color: #BFBFBF;
float: left;
}
.gallery_col4{
width: 20%;
height: 150px;
background-color: #BFBFBF;
float: left;
}
.gallery_col5{
width: 20%;
height: 150px;
background-color: #BFBFBF;
float: left;
}
.gallery_col6{
display: none;
}
.gallery_col7{
display: none;
}
<div class="gallery_col1">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col2">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col3">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col4">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col5">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col6">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
<div class="gallery_col7">
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
</div>
答案 0 :(得分:1)
您有两种选择:
1)保留当前的HTML并添加:
.gallery img{
max-width:100%;
max-height:100%;
}
2)将图片从img
标记移动到div
的背景图片,然后使用background-size:contain;
,background-repeat:no-repeat;
和backgorund-position:center center;`
.gallery div {
background-image:url(http://paramwebeek.com/wp-content/uploads/2013/09/demo.png);
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}