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

我正在使用一个包含大图（2560 x 1890）的页面。根据浏览器的宽度，需要将这张大图片裁剪到中间。取决于当前窗口宽度的图像裁剪

当我看到该网站上的图像的“左”的偏差取决于浏览器窗口的窗口宽度被重新计算，这样中间的家伙总是可见。

我的HTML：

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

我怎样才能正确地计算图像左侧偏移？

我与Zurb基金会5.4.0

感谢您的帮助工作提前！

亲切的问候〜Dragon54

来源

2014-09-02 Dragon54

为什么不干脆放弃100％的宽度，则图像将按比例 – mplungjan 2014-09-02 07:41:01

@mplungjan它需要裁剪。取决于窗口的大小。 – Dragon54 2014-09-02 07:42:05

重复？ http://stackoverflow.com/questions/16741363/html-css-resize-and-crop-as-browser-size-changes – mplungjan 2014-09-02 07:53:57

您可以通过具有图像围绕两个包装实现中心和裁剪。

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。

来源

2014-09-02 08:00:30 flowstoneknight

这个技巧。非常感谢你！ – Dragon54 2014-09-02 08:49:44

试试这个

<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

来源

2014-09-02 08:00:34 Benjamin

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

回答

相关问题