Javascript检测屏幕分辨率，更改css，相应地裁剪图像

Question

所以我知道如何通过javascript根据分辨率更改css。

如何根据屏幕分辨率“裁剪”图像？

Answer 1

您可以从window.screen获取屏幕详细信息 - 但我个人建议您只查看当前窗口的大小，唯一的原因是如果您要调整窗口的大小，那就非常不高兴。

一旦您知道了制作图像所需的尺寸和大小，我发现通过将图像置于包含overflow: hidden;的包含DIV的内容中，可以轻松裁剪图像。然后，您可以将包含DIV的大小调整为所需的大小，并将图像的top和left CSS属性设置为左上角可见角坐标的负值。

<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;">
    <img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" />
</div>