Question

我有以下内容： -

<div id="join-container"></div>

    #join-container {
        position: relative;
        width: 100%;
        height: 600px;
        background: url(../img/work-for-us-header.jpg);
    }

我想让这个响应更快，所以当缩小浏览器时高度会调整，我尝试删除宽度和高度并添加背景大小：100％;但这并没有显示任何图像。

无法理解我做错了什么。

Answer 1

您可以使用padding-bottom 但，您必须确定图像的宽高比。

padding-bottom相对于容器的宽度。因此，如果您的图片的宽高比是 16：9 ，那么您的容器应为：

#container {
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 = .5625 */
  background: transparent url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg') no-repeat center;
  background-size: 100%;
}

https://jsfiddle.net/awqbLukm/

当您调整浏览器大小时，您的填充底部将按容器的宽度成比例调整大小。

现在，如果您打算在此框中放置一些其他内容，则可以创建另一个div，该#container位于此width内，并设置其height和{{1} } 100%。

Answer 2

这取决于您希望如何显示背景。它不需要元素内部的内容，以使background-size: contain起作用。你的问题是你的身高是按像素计算的，这并不能支持你的元素的响应能力。

最好使用百分比或视口高度。请注意，并非所有浏览器都支持viewport-height。

示例1 ：保持背景居中并适合元素的边界，并保持背景的比例。

<div id="join-container"></div>

CSS：

#join-container {
  position: relative;
  width: 100vw;
  height: 30vh;
  background: url('http://placehold.it/1000x500') no-repeat;
  background-size:contain;
  background-position: center; 
  border: 1px black solid;
}

示例2：始终使用背景填充元素。缺点是它可能会扭曲你的形象。

<div id="join-container_2"></div>

CSS：

#join-container_2 {
  position: relative;
  width: 100vw;
  height: 30vh;
  background: url('http://placehold.it/1000x500') no-repeat;
  background-size: 100% 100%;
  background-position: center; 
  border: 1px black solid;
}

示例：https://jsfiddle.net/mmru9m9o/ 使用视口大小播放。

如果你真的必须以像素为单位保持div高度，你可能想要开始考虑媒体查询。你可以在这里查看：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

是的，只需使用img。

<img style='width:100%;height:100%;' src='cat.png'>

或者如果你必须......

<div class="bla">
</div>

.bla{
    width: 100%;
    height: 600px;
    background:  url(../img/work-for-us-header.jpg) no-repeat;
    background-size: contain;
}

CSS - 响应div与背景

3 个答案: