Question

我正在首页上展示包含大图片（2560 x 1890）的页面。需要根据浏览器的宽度将这张大图片裁剪到中间位置。

当我查看该网站时，图像的“左”偏移量会根据浏览器窗口的窗口宽度重新计算，这样中间的人总是可见。

我的HTML：

<div class="page-background starter">
    <img src="./img/backgrounds/start.png" alt="index-background"/>
</div>

如何正确计算左偏移图像？

我正在与Zurb的基金会5.4.0

合作

提前感谢您的帮助！

亲切的问候〜Dragon54

Answer 1

您可以通过在图像周围放置两个包装来实现居中和裁剪。

HTML：

<div class="crop-wrapper">
    <div class="wide-wrapper">
        <img src="image.jpg"/>
    </div>
</div>

CSS：

.crop-wrapper{
    overflow: hidden;
    position: relative;
    width:100%;
}
.wide-wrapper {
    left: -200%;
    position: relative;
    text-align: center;
    width: 500%;
}

.crop-wrapper的作用类似于视口，仅显示浏览器窗口允许的内容。 .wide-wrapper只是一个非常广泛的<div>，它允许您将内容放在比容器更宽的位置。

这是fiddle。

Answer 2

尝试

<div class="holder">
    <div class="page-background starter">
        <img src="./img/backgrounds/start.png" alt="index-background"/>
    </div>
</div>

<强>风格

.holder{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    overflow:hidden;
}
.page-background img{
    position: absolute;
    width: 1024px;
    height: auto;
}

<强> DEMO

图像裁剪取决于当前窗口宽度

2 个答案: