Question

所以我有一排图像是响应式布局的一部分。容器从边缘到边缘形成。唯一有问题的区域似乎是这些图像在屏幕扩展并再次缩小时会扭曲。有没有真正的解决方案来处理这个问题。我必须补充说，图像是用PHP加载的所以我不知道;我认为我有选择唱背景图像？那当然是理想的。

我试图保留图像的比例而不会在高度或宽度上扭曲，但我似乎无法达到这个目的？

Demo of the problem

/******* 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>

Answer 1

您有两种选择：

1）保留当前的HTML并添加：

Demo Fiddle

.gallery img{
    max-width:100%;
    max-height:100%;
}

2）将图片从img标记移动到div的背景图片，然后使用background-size:contain;，background-repeat:no-repeat;和backgorund-position：center center;`

Demo Fiddle

.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;
}

如何以正确的方式缩放图像？

1 个答案:

Demo Fiddle

Demo Fiddle