Javascript檢測屏幕分辨率，更改CSS，相應裁剪圖像

Question

所以我知道如何改變CSS取決於通過javascript的分辨率。

如何根據屏幕分辨率對圖像進行「裁剪」？

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>