我一直在努力解决这个问题,虽然尝试了StackOverflow中的许多主题,并且想知道是否有人有任何建议!
我正在使用Bootstrap 3,基本上我想将图像放在容器<div>
中,这将使用浏览器窗口调整大小,内容仍然保留在其中。那么我怎样才能让它响应呢?提前谢谢!
HTML
<div id="special-dishes-section">
<div class="container">
<div class="special-dishes">
</div> <!-- end special-dishes -->
</div> <!-- end container -->
</div> <!-- end special-dishes-section -->
CSS
#special-dishes-section{
background: url('../images/special-dishes-bg.jpg') no-repeat center center;
min-height: 560px;
padding: 71px 0 65px 0;
position: relative;
}
.special-dishes{
background: url('../images/wooden-bg.png') no-repeat center center;
min-height: 424px;
}
答案 0 :(得分:0)
box-sizing: border-box;
此属性可在需要响应时帮助您。 有关更多信息,请参阅此链接: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
希望它对你有所帮助。
答案 1 :(得分:0)
尝试background-size: cover;
或background-size: contain;
。