形象顶部响应式网页设计

Question

我想在桌面显示器上显示全宽度图像(最大图像上的剪辑顶部到最大高点：500px;(，以及用于移动设备的原始纵横比。

我在WordPress网站上使用龙门框架。我已经使用了CSS工作来迫使图像在父盒子外面显示完整宽度。

示例从顶部起作用，除了图像高度小于最大高度时，除了将空间推到顶部吗？

.boxed-container{
  margin:30px;
  padding: 30px;
  background:red;
}
.bg-img{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  max-height: 300px;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg) no-repeat bottom;
  background-size: 100% auto;
}
h1 {
  position: absolute;
  width: 100%;
  bottom: 0px;
  text-align: center;
  margin-bottom: 0px;
}

<div class="boxed-container">
  This is where the boxed content belongs.
  <div class="bg-img">
    <h1>This is the header</h1>
  </div>
</div>

Answer 1

此代码以object-fit:cover

正确的方式播放图像

#image {
    width: 100%;;
    height: 500px;
    object-fit:cover;
}

，使用@media，您可以更改高度并随心所欲地适合屏幕分辨率。

sidenote：这在IE中不起作用。

编辑：

object-fit:

fill替换的内容的大小以填充元素的内容框：对象的混凝土对象大小是元素使用的宽度和高度。

contain替换内容的尺寸是为了维持其纵横比，同时安装在元素的内容框中：其混凝土对象大小是针对元素所使用的宽度和高度的包含约束的。

cover替换内容的大小是在填充元素的整个内容框时保持其长宽比的大小：其混凝土对象的大小是针对元素所使用的宽度和高度的盖子约束。

none不调整替换的内容以适合元素的内容框内：对象的具体对象大小是使用没有指定大小的默认尺寸算法确定的，默认对象大小等于替换的元素的使用宽度和高度。

。

scale-down内容的大小好像没有指定或包含，以较小的混凝土对象大小为准。