Image 裁剪顶级图像响应网页设计

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

我正在Wordpress网站上使用龙门框架。我已经使用了css来强制图像在父装箱容器外显示全宽

示例除了图像高度小于“最大高度”时有空间推到顶部外，此操作从顶部裁剪

。盒装容器{
利润率：30像素；
填充：30px；
背景：红色；
}
.bg img{
位置：相对位置；
显示：块；
溢出：隐藏；
填充：0px；
边际：0px；
宽度：100vw；
高度：100vh；
最大高度：300px；
左：50%；
右：50%；
左边距：-50vw！重要；
右边保证金：-50vw！重要；
背景：url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg)无重复底部；
背景尺寸：100%自动；
}
h1{
位置：绝对位置；
宽度：100%；
底部：0px；
文本对齐：居中；
边缘底部：0px；
}

这是装箱内容所属的位置。
这是标题

此代码使用

对象匹配：封面以正确的方式裁剪图像

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

使用

@media

您可以根据屏幕分辨率随意更改高度和宽度

旁注：这在IE中不起作用

编辑：

对象匹配：

填充

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

包含

替换的内容的大小将在适合元素的内容框时保持其纵横比：其具体对象大小将解析为针对元素使用的宽度和高度的包含约束

封面

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

none

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

缩小比例

---

内容的大小如同未指定任何内容或包含内容一样，以较小的具体对象大小为准。

您能更清楚地表述您的目标吗？您看到我的答案了吗？？？是的，我看到了您的答案谢谢这非常有帮助，而且很有效。很高兴它有效！）