html - 我必须为 BG 图像或父容器指定高度吗？

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 会保持它们的纵横比，而 div 不会那样做，所以你可以为 div 指定一个静态宽度和高度，并在那里向下移动它们没有更多空间了。