代码之家 › 专栏 › 技术社区 › Daryl

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

crop detect resolution image javascript

1

Daryl · 技术社区 · 15 年前

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

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

1 回复 | 直到 15 年前

1

2

Orbling 15 年前

你可以从 window.screen -尽管我个人认为我建议你去看看当前的窗口有多大,但唯一的理由是如果你要调整窗口的大小,这是非常不受欢迎的。

一旦你知道图片的尺寸和大小,我发现把它们放在一个包含有 overflow: hidden; 准备好了。然后可以将包含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>