大页边距

我有一张想要达到特定效果的图像。基本上，当您将浏览器窗口设置得更小时，我想同样裁剪左侧和右侧，以便图像不会调整大小，并始终看到中心。大页边距

我已经做到了这一点通过以下方式：

<style> 
    .banner{ 
     text-align: center; 
     overflow: hidden; 
     height: 350px; 
     position: relative; 
    } 

    .banner img{ 
     position: relative; 
     left: 300%; 
     margin-left: -600%; 
    } 
</style> 

<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>

的js小提琴：https://jsfiddle.net/szsj6f9m/

有一件事我已经使用这种方法注意到的是，如果我左边是100％，保证金左是-200％图像将在中途开始滑回到右侧。我不完全明白为什么，我只知道我需要将百分比设置为300％，因此它在320像素的屏幕上表现正确。

这里的例子是什么，我说什么，只是调整您的浏览器，从小到大，你会看到什么我谈论：

的js小提琴：https://jsfiddle.net/szsj6f9m/1/

我的问题是这样的：

到目前为止屏幕的位置是否可行并在其上放置了如此大的左边距？从小型设备或任何设备的性能角度来看，这是否会导致任何类型的问题？你有什么理由可以这样说吗？

来源

2017-03-01 Bojan

我个人使用left:50%;transform:translate(-50%,0);（作品甚至垂直居中）top:50%;transform:translate(0,-50%);https://jsfiddle.net/szsj6f9m/3/

来源

2017-03-01 20:51:03

这将为IE9的支持和起来，我相信我的版本是浏览器甚至早于这一点。然而，这也是一个很好的方法，谢谢你。 – Bojan

@Bagzli说实话...不要打扰古老的浏览器...这是深入到开发者和客户的地狱之路。：\ - 当有人访问我曾参与的较大项目的网站时，我只是触发覆盖弹出窗口，背景正确呈现为屏幕截图（模糊），并强制访问者为所有人升级浏览器。 –

我有重定向，但我正在为其他人编写此代码，我希望他们有自己的选择，并自己做出决定。 – Bojan

回答

相关问题