html - 如何使用CSS使div背景图像中的div元素响应

Question

我的问题是，当屏幕变小时，如何使 div style=background-image 中的元素正常工作。在我的例子中，图像框内的元素之一似乎保持相同的高度。

#main_article_box {
  width: 728px;
  height: 374px;
  border: 1px solid #f8f8f8;
  -moz-box-shadow: 0 2px 1px #9c9c9c;
  -webkit-box-shadow: 0 2px 1px #9c9c9c;
  box-shadow: 0 2px 1px #9c9c9c;
}
#main_article_text {
  margin: 280px 3px 10px 3px;
  height: 90px;
  background: #ffffff;
  border: 1px solid #f8f8f8;
  background: #ffffff;
  background: -moz-linear-gradient(#ffffff, #cccccc);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(1, #ffffff));
  background: -webkit-linear-gradient(#ffffff, #cccccc);
  background: -o-linear-gradient(#ffffff, #cccccc);
  background: -ms-linear-gradient(#ffffff, #cccccc);
  background: linear-gradient(#ffffff, #cccccc);
  /*-moz-border-radius: 1px;
	border-radius: 1px;
	-moz-box-shadow: 0 1px 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px #f8f8f8;
	box-shadow: 0 1px 1px #f8f8f8;*/
  opacity: 0.8;
  filter: alpha(opacity=80);
}
#main_article_title {
  font-size: 23px;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-shadow: #333;
  font-weight: bold;
  margin: 8px;
}
#main_article_short_text {
  font-size: 14px;
  width: 530px;
  font-weight: bold;
  margin: -2px 0 0 8px;
  color: #333333;
}
@media only screen and (max-width: 460px) {
  #main_article_box {
    width: 100%;
    height: auto;
  }
  #main_article_text {
    width: 98%;
    height: auto;
  }
  #main_article_title {
    font-size: 16px;
  }
  #main_article_short_text {
    font-size: 11px;
  }
}

<div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg); no-repeat center; background-size: 100% auto; ">
  <div id="main_article_text">
    <div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a>
    </div>
    <div id="main_article_short_text">
      <p>This is some intro text the article below title. This is some intro text the article below title.</p>...
    </div>
  </div>
</div>

Answer 1

我删除了一些样式只是为了让我理解代码。该解决方案适合您吗？

.wrapper {
  position:relative;
  width:728px;
  max-width:100%;
}
.wrapper:after {
  content: ' ';
  clear: both;
  display: block;
}

#main_article_box {
  float:left;
  width:100%;
  height:auto;
  border:0 none;
  padding-top:51.37%;
  background-size:cover;
}


#main_article_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 3px 3px 3px;
  height: 90px;
  background: #ffffff;
  border: 1px solid #f8f8f8;
  background: #ffffff;
  background: -moz-linear-gradient(#ffffff, #cccccc); 
  background: -webkit-gradient(linear,left bottom,left     top,color-stop(0, #cccccc),color-stop(1, #ffffff));	
  background: -webkit-linear-gradient(#ffffff, #cccccc);	
  background: -o-linear-gradient(#ffffff, #cccccc);
  background: -ms-linear-gradient(#ffffff, #cccccc);
  background: linear-gradient(#ffffff, #cccccc);
  /*-moz-border-radius: 1px;
  border-radius: 1px;
  -moz-box-shadow: 0 1px 1px #f8f8f8;
  -webkit-box-shadow: 0 1px 1px #f8f8f8;
  box-shadow: 0 1px 1px #f8f8f8;*/
  opacity:0.8;
  filter:alpha(opacity=80);
}

#main_article_title {
  font-size: 23px;
  letter-spacing: -1px;
  text-transform:uppercase;
  text-shadow: #333;
  font-weight: bold;
  margin: 8px;
}

#main_article_short_text {
  font-size: 14px;
  width: auto;
  font-weight:bold;
  margin: -2px 0 0 8px;
  color: #333333;
}

@media only screen and (max-width: 460px) {


  #main_article_box {

    width: 100%;
    height: auto;

  }


  #main_article_text {
    width: 98%;
    height: auto;


  }

  #main_article_title {
    font-size: 16px;


  }

  #main_article_short_text {
    font-size: 11px;

  }  

}

<div class="wrapper">
  <div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg);">
    <div id="main_article_text">
      <div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a></div>
      <div id="main_article_short_text"><p>This is some intro text the article below title. This is some intro text the article below title. </p>...</div>
    </div>
  </div>
</div>