html - 离页边距大

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/

我用这种方法注意到的一件事是，如果我将 left 设置为 100% 并将 margin-left 设置为 -200%，则图像将在中途开始向右滑动。我不完全明白为什么，我只知道我需要将百分比设置为 300%，这样它才能在 320 像素的屏幕上正常运行。

这是我所说的示例，只需将浏览器的大小从小调整到大，您就会明白我在说什么:

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

我的问题是:

到目前为止屏幕的位置并在上面扔这么大的左边距是否可以？从较小设备或任何设备的性能 Angular 来看，这是否会导致任何类型的问题？您是否有任何理由可以拒绝这样做。

Answer 1

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