Question

我有一个想要达到一定效果的图像。基本上当你使浏览器窗口变小时，我想平均地左右裁切，这样图像不会调整大小，我总是看到中心。

我通过以下方式完成了这项工作：

<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 fiddle：https://jsfiddle.net/szsj6f9m/

我注意到这种方法的一个方面是，如果我左边是100％而左边距是-200％，那么图像将在中途开始滑回右边。我不完全理解为什么，我只知道我需要将百分比设为300％，以便在320px屏幕上正常运行。

以下是我所谈论的示例，只需将您的浏览器调整为小到大，您就会看到我在说什么：

Js fiddle：https://jsfiddle.net/szsj6f9m/1/

我的问题是：

到目前为止屏幕的位置是否可以并且在它上面留下如此大的左边距？从性能的角度来看，这是否会在较小的设备或任何设备上造成任何问题？你有没有理由认为不会这样做。

Answer 1

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

页面边缘较大

1 个答案: