图像响应式网页设计的裁剪顶部答案

【问题标题】：Crop top of image responsive web design图像响应式网页设计的裁剪顶部
【发布时间】：2017-04-20 18:19:50
【问题描述】：

我想在桌面显示器和移动设备的原始纵横比上以宽格式显示全宽图像（将图像顶部裁剪为最大高度：500 像素；）。

我在 Wordpress 网站上使用龙门框架。我使用了一个 css 解决方法来强制图像在父盒装容器之外显示全宽。

示例除了在图像高度小于 max-height 时将空间推到顶部之外，这会从顶部裁剪？

.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>

【问题讨论】：

你能更清楚地表达你的目标吗？
你看到我的回答了吗？？？
是的，我确实看到了您的回答，谢谢，这非常有帮助且有效。
很高兴它成功了！ :)

标签： image css responsive-design

【解决方案1】：

此代码使用object-fit:cover 正确裁剪图像

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

使用@media，您可以随意更改高度，以适应屏幕分辨率。

旁注：这在 IE 中不起作用。

编辑：

object-fit:

fill 被替换的内容的大小可以填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。

contain 被替换的内容的大小可以保持其纵横比，同时适合元素的内容框：它的具体对象大小被解析为对元素使用的宽度和高度的包含约束。

cover 被替换的内容在填充元素的整个内容框的同时保持其纵横比的大小：它的具体对象大小被解析为对元素使用的宽度和高度的覆盖约束。

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

scale-down 内容的大小就像没有指定或包含指定一样，以导致更小的具体对象大小为准。

【讨论】：