Question

我一直在努力解决这个问题，虽然尝试了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;
}

Answer 1

box-sizing: border-box;

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

希望它对你有所帮助。

Answer 2

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

如何使div背景图像在另一个div内部响应？

2 个答案: