图像响应式网页设计的顶部作物

我想在桌面显示器上显示宽幅图像（图像的顶部为max-height：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>

来源

2017-04-20 Lin Baird

你能说出你的目标更清楚些吗？ – MeltingDog

你看到我的答案吗？ –

是的，我确实看到你的答案谢谢你，这是非常有益的和工作。 –

此代码裁剪图像用正确的方式object-fit:cover

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

并与@media你可以改变高度，并与无论你喜欢，以适应屏幕分辨率。

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

编辑：

object-fit:

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

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

cover 被替换的内容的尺寸却使元件的整个内容框，以保持其高宽比：其具体的对象大小被解析为抵靠元件的使用宽度和高度的盖约束。

none 被替换的内容不被调整大小以适应元件的内容盒内：使用默认的不带指定尺寸上浆算法和默认的对象的大小等于替换元素的使用宽度被确定的对象的具体对象的尺寸和高度。

scale-down 内容的大小就好像没有指定任何内容或包含内容，取决于哪一个会导致较小的具体对象大小。

来源

2017-04-20 10:14:41

图像响应式网页设计的顶部作物

回答

相关问题