我需要为BG图像或父容器指定高度吗？

我当时使用的是<img src="#">，但学会了在响应式设计中使用背景图像的所有优点，所以我想要开关，但是一旦切换背景图像不能保持其大小。我需要为BG图像或父容器指定高度吗？

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

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

来源

2014-11-25 CSS Apprentice

使用background-size，http://jsfiddle.net/akrrkLy1/2/这是你想要的吗？ – Cattla 2014-11-25 04:39:35

不，我试图保持高度：（和宽度）响应（20％）。它在我切换到背景图像之前工作 – 2014-11-25 04:42:44

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

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

谢谢你们一个最大高度和最大宽度！

来源

2014-11-25 05:12:14

我猜它曾经工作，因为十个分量的img的宽高比我如果你不告诉他们不要，div不这样做，所以你可以指定一个静态的宽度和高度的divs和向下移动时，没有更多的空间。

来源

2014-11-25 04:53:07 marioivangf

我需要为BG图像或父容器指定高度吗？

回答

相关问题