如何使另一个 div 内的 div 背景图像响应？答案

【问题标题】：How to make div background image inside another div to responsive?如何使另一个 div 内的 div 背景图像响应？
【发布时间】：2014-12-16 03:34:06
【问题描述】：

虽然从 StackOverflow 的许多主题中尝试过，但我一直在为这个问题苦苦挣扎，只是想知道是否有人有任何建议！

我正在使用 Bootstrap 3，基本上我想将图像放置在容器 <div> 中，它将随着浏览器窗口调整大小，内容仍然保留在其中。那么我怎样才能让它响应呢？提前谢谢！

Demo

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

【问题讨论】：

图片是要放在标签还是css background-images中？

标签： html css image twitter-bootstrap responsive-design

【解决方案1】：

box-sizing: border-box;

此属性可在需要响应时为您提供帮助。有关更多信息，请参阅此链接： http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

希望对你有帮助。

【讨论】：

【解决方案2】：

试试background-size: cover; 或background-size: contain;。

【讨论】：

您可能只想更详细地了解这个答案...举一些例子说明为什么它可以解决 OP 的问题...
@LcSalazar，应该是这样的吗？ http://codepen.io/anon/pen/qEZwNW
请看我的live example。调整浏览器大小时，背景对于内部内容来说太小了，我的意思是要自动扩展高度。