html - 将包含背景图像的 Div 设置为宽度 :100% and height:auto causing it to not display

Question

我有一个名为#rightside 的父 div，在这个父 div 中我还有 2 个 div，一个是名为 #mapcanvas 的谷歌地图，另一个是名为#buildingpic 的 div，其中包含我们建筑物的背景图像。我正在使用相对大小制作网站，但出于某种原因，当我将背景图像的大小从以像素为单位的绝对大小切换为使用百分比和自动的相对大小时，#buildingpc 消失，唯一显示的是#mapcanvas。

这里是#rightside parent 和 2 个子 div 的 HTML。

<div id="rightside">
     <h1>Where To Find Us</h1>
   <a href="img/buildingpic.jpg"><div id="buildingpic"></div></a>
     <br>   
      <div id="map_canvas">
            <script>
                function initialize() {

                    var myLatlng = new google.maps.LatLng(39.960478, -75.603013);
                    var mapOptions = {
                    center: myLatlng,
                    zoom: 19,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    },
                    zoomControl: true,
                    zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.LEFT_TOP
                    },
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions, marker);

                    var marker = new google.maps.Marker({
                    position: myLatlng,
                     map: map
                    });
                 }

              google.maps.event.addDomListener(window, 'load', initialize);
         </script>
     </div> 

和 CSS:

#rightside {
width: 20%;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 5px 8px 10px;
border: none;
}

#rightside h1 {
 width: 90%;
 margin: 8px auto ;
 background: #FF0000;
 box-shadow: 1px 1px 1px #888888;
 text-shadow: #CCC 1px 1px 1px;
 font-size: 1.35em; 
 padding: 10px 2%;
 color: #FFFFFF; 

 }

#buildingpic {
background-image: url(../img/buildingpicresize.jpg);
display: block;
width:  100%;
height: auto;
margin: 1em auto 0;
border-radius: 1px;
border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px rgba(20, 20, 20, 0.2);
 }

#location {
text-align: center;
color: #878787;
font-weight: bold;
}

#map_canvas { display: block; width: 300px; height: 300px;  padding: 0; margin:0 auto 0;  padding-bottom:15px; background-color: #CCC; 
  border-radius: 1px;
  border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.2);
}

/* overrides the css max-width 100% browser reset("normalizer") otherwise googlemaps zoom in/out buttons dont display properly*/
#map_canvas img {
max-width: none;
}

Answer 1

height: auto; div 为 0。尝试将 min-height: 1em; 添加到违规者。如果出现一小部分，您就会知道它正在消失，因为 div 中没有任何内容。如果您需要它是给定的宽高比——例如 2:1——请执行以下操作:

.offender {
    height: 0;
    // no min-height
    padding-bottom: 50%;
}

padding 设置为百分比时表示它的宽度。 padding-bottom: 50%;，因此，意味着元素的高度始终是宽度的 1/2。

可以在此处找到该技术使用伪元素的更简单的版本:http://www.mademyday.de/css-height-equals-width-with-pure-css.html