中心和裁剪img標簽

Question

只是想知道是否可以使用

<div><img src="xxx.jpg" /></div>

1. 使圖像在瀏覽器中居中
2. 列出項目以在減小瀏覽器寬度以進行響應式布局時將其保持在中心
3. 當瀏覽器的圖片小於圖片時，“不會”縮小圖片尺寸
4. 相反，它將使用滾動條裁剪圖像（溢出：隱藏），但仍保持圖像中心...

使用img標簽可以做到這一點嗎？ 我知道我可以使用CSS輕松處理背景圖片。

但是由於我在CMS網站上工作，並且圖像是由客戶端上傳的，因此背景圖像絕對不是解決方案。

Answer 1

我認為第3點和第4點使得僅使用CSS不可能做到這一點，因為您必須使用CSS來設置滾動位置，我僅能使用CSS的最佳選擇就是： jsFiddle和Fullscreen Demo 。

body {
    text-align: center;
}
div {
    max-width: 100%;
}
img {
    margin: 0 -100% 0 -100%;
}

這種方法始終將圖像保持在中心位置，但這並不能真正減小圖像尺寸，但是由於我不得不使用負邊距，因此無法將不可見的部分滾動到視圖中。

而是采用JS方法，您可以這樣做： jsFiddle和Fullscreen Demo 。

CSS

body {
    text-align: center;
}
div {
    width: 100%;
    overflow-x: auto;
}

JS

$(window).resize(function () {
    $("div").scrollLeft(($("img").width() / 2) - ($(this).width() / 2))
});

這種方法使用jQuery來確保每當調整瀏覽器窗口大小時圖像的中心就會滾動到視圖中。