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

Question

I was using <img src="#"> but learned about the perks of using background images in responsive design so I wanted to make the switch, but once I switched the background images didn't maintain their size.

Is there a way to do this with percentages, or do I have to specify a different value?

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，img会保留它们的长宽比，而div则不会这样做，因此您可以为div指定一个静态的宽度和高度，并在没有更多的时候向下移动剩余空间。

Answer 2

I got it! I had to specify the height and width of the image and then give it a max-height and max-width of 100%

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

Thanks guys!!