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

Posted 2023-02-25

【中文标题】Javascript检测屏幕分辨率，更改css，相应裁剪图像

【英文标题】：Javascript Detect Screen Resolution, change css, crop images accordingly

【发布时间】：2010-11-25 00:35:28

【问题描述】：

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

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

【参考方案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;"    />
</div>

【讨论】：

是的，我已经想到了这种方法，很想知道是否有 javascript 解决方案，不过感谢您的贡献。顺便说一句，您不会将 div 设置为 overflow:hidden 并且您会根据屏幕分辨率更改该 div 的大小，然后相应地将图像定位在其中，而不是相反？

@Daryl 是的，对不起，因为它太晚了，所以把顶部/左侧放在错误的位上，现在已修复。我假设你会通过 JavaScript 来做这件事，我只是展示了你需要操作的 html 结构。

啊，没问题。无论如何，这可能是我要坚持的方法。否则我只会给自己带来不必要的麻烦哈哈。睡一觉吧。