Question

我正在使用<img src="#">但是了解了在响应式设计中使用背景图像的好处，所以我想进行切换，但是一旦我切换背景图像就不能保持它们的大小。

有没有办法用百分比来做到这一点，还是我必须指定不同的值？

的jsfiddle http://jsfiddle.net/CSS_Apprentice/akrrkLy1/1/

HTML

<div class="contentcontainer">
    <div id="homepic1" class="pic boxshadow picborder"></div>
    <div id="homepic2" class="pic boxshadow picborder"></div>
    <div id="homepic3" class="pic boxshadow picborder"></div>
    <div id="homepic4" class="pic boxshadow picborder"></div>
    <div id="homepic5" class="pic boxshadow picborder"></div>
    <div id="homepic6" class="pic boxshadow picborder"></div>
    <div id="homepic7" class="pic boxshadow picborder"></div>
    <div id="homepic8" class="pic boxshadow picborder"></div>
    <div id="homepic9" class="pic boxshadow picborder"></div>
    <div id="homepic10" class="pic boxshadow picborder"></div>
    <div id="homepic11" class="pic boxshadow picborder"></div>
    <div id="homepic12" class="pic boxshadow picborder"></div>
</div>

CSS

.contentcontainer {
    text-align: center;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.pic {
    display: inline-block;
    width: 20%;
    height: 20%;
    margin: 0 3.5%;
    background-repeat: no-repeat;
}

/* Pics */  
    #homepic1 {background-image: url('http://placehold.it/225x225')}
    #homepic2 {background-image: url('http://placehold.it/225x225')}
    #homepic3 {background-image: url('http://placehold.it/225x225')}
    #homepic4 {background-image: url('http://placehold.it/225x225')}
    #homepic5 {background-image: url('http://placehold.it/225x225')}
    #homepic6 {background-image: url('http://placehold.it/225x225')}
    #homepic7 {background-image: url('http://placehold.it/225x225')}
    #homepic8 {background-image: url('http://placehold.it/225x225')}
    #homepic9 {background-image: url('http://placehold.it/225x225')}
    #homepic10 {background-image: url('http://placehold.it/225x225')}
    #homepic11 {background-image: url('http://placehold.it/225x225')}
    #homepic12 {background-image: url('http://placehold.it/225x225')}

/* For Looks: I Don't Believe These Are Essential To The Question */
    .boxshadow {
        box-shadow: 0px 0px 8px #555555;
        -webkit-box-shadow: 0px 0px 8px #555555;
        -moz-box-shadow: 0px 0px 8px #555555;
    }

    .picborder {
        border: white 2px solid;
    }

Answer 1

我猜它曾经工作过，因为如果你不告诉他们不要这样做，那就是img保持他们的宽高比，divs不这样做，所以你可以指定div的静态宽度和高度并移动当没有更多的空间时，他们就会失望。

Answer 2

我明白了！我必须指定图像的高度和宽度，然后给它一个最大高度和最大宽度100％

.pic {
    height: 225px; 
    width: 225px;
    max-height: 100%;
    max-width: 100%;
}

谢谢你们！

我是否必须为BG图像或父容器指定高度？

2 个答案: