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

时间:2014-08-12 11:08:44

标签: html css image

所以我有一排图像是响应式布局的一部分。容器从边缘到边缘形成。唯一有问题的区域似乎是这些图像在屏幕扩展并再次缩小时会扭曲。有没有真正的解决方案来处理这个问题。我必须补充说,图像是用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>              

1 个答案:

答案 0 :(得分: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;
}