根据当前窗口宽度裁剪图像答案

【问题标题】：Image cropping depending on current window width根据当前窗口宽度裁剪图像
【发布时间】：2014-09-02 07:37:48
【问题描述】：

我正在处理一个在首页上包含一张大图片 (2560 x 1890) 的页面。这张大图需要根据浏览器的宽度裁剪到中间。

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

我的 HTML：

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

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

我正在使用 Zurb 的 Foundation 5.4.0

提前感谢您的帮助！

亲切的问候 ~Dragon54

【问题讨论】：

为什么不给一个 100% 的宽度然后图像会缩放
@mplungjan 需要裁剪。视窗口大小而定。
重复？ stackoverflow.com/questions/16741363/…
听起来你最好使用background-size: cover将其设置为背景图像。

标签： jquery css html mobile zurb-foundation

【解决方案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。

【讨论】：

【解决方案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

【讨论】：