先按寬度縮小圖像，然后按最大寬度縮小圖像，然后按比例縮小

Question

我有一個1200 x 200px的圖像。 在此圖像的中心，我有一個500 x 200像素的空間，它是完整圖像的主要內容。 在此圖像的每一側，我都有其他內容。 注意：它在單個圖像上。

如果減小窗口寬度，則首先應使用圖像的其他內容，但要對其進行裁剪，以保持圖像高度不變。 但是，如果我將窗口寬度減小到主要內容寬度以下（此時，所有其他內容都被切除了），那么現在應該按比例調整圖像大小，從而影響高度。

我的疑問：

1. 僅使用CSS可能嗎？
2. 如果沒有，有一些JS庫可以做到嗎？
3. 如果沒有，我應該如何構造HTML，CSS和JS使其起作用？

---

這是一個全角橫幅示例：請注意，該橫幅具有主要內容，兩側具有其他內容。

下面的這張圖片應該有助於理解：我試圖模擬在1200像素，1000像素和500像素（尚不影響高度）上調整窗口寬度的大小，然后模擬350像素（按比例影響和調整圖像大小）。

Answer 1

僅使用CSS可能嗎？

是的，您只需要1 <div> 。 將圖像視為背景圖像，將死點定位為background-position 。 然后使用媒體查詢調整<div>大小，將寬度設置為指定的斷點。

Answer 2

您可以使用一個簡單的媒體查詢，如下所示：

@media max-width: 500px {
  #your-image {
    width: 100vw;
  }
}

Answer 3

使用媒體查詢添加圖像/元素和更改CSS。 至於您的問題，請使用百分比來調整圖像大小。 我建議查找漸進增強和響應式設計。 另外，在不使用視口的情況下，請查看視口。 不要使用VW，IE，EDGE（不支持VMAX）和Opera mini，ie8（完全不支持）還沒有足夠的支持。

Answer 4

 #banner { background-image: url("http://i.stack.imgur.com/csRha.png"); width: 100%; height: 200px; background-repeat: no-repeat; margin: 0 auto; display: block; border: 1px solid red; } @media all and (min-width: 1200px) { #banner { width: 1200px; } } @media all and (max-width: 1200px) { #banner { background-position: 50% 0; } } @media all and (max-width: 500px) { #banner { background-size: 240%; } } 

 <div id="banner"></div>