焦點/對焦點，用於響應式調整圖像尺寸（例如，全寬頁眉）

Question

我經常使網站具有響應能力，並在頁面的某些位置具有全角標題或元素，這些全角標題或元素是全角的，例如圖像滑塊。

我經常這樣做，以便將它們轉化為

background-image: url(/images/image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

這種方法的問題在於，當將瀏覽器拉伸或縮小為不同的寬高比時，圖片的重要內容常常會被截斷。 考慮一下頭，四肢等。

有時我可以通過更改背景位置來解決此問題，但我經常不這樣做。

我正在尋找一個合適的解決方案，以確保可以定位重要內容，因此無論寬高比如何，我都知道可以顯示該內容。

顯示問題的圖像：

還有我從自己的答案中挑選的圖像：

Answer 1

似乎背景位置正是您要尋找的（但要專注於某個位置，而不是某個區域）。

以貓眼為重點的演示。 將鼠標懸停在div上可以看到它適應。

 .base { width: 500px; height: 200px; background: url(http://placekitten.com/1000/750); background-size: cover; position: absolute; top: 40px; left: 40px; background-position: 54% 46%; transition: height 2s, width 2s; } #base1:hover { height: 40px; } #base2 { top: 250px; height: 500px; width: 600px; } #base2:hover { width: 200px; } 

 <div class="base" id="base1"></div> <div class="base" id="base2"></div> 

Answer 2

我發現了一個jQuery庫，可通過添加數據屬性來使焦點位於圖像上。 它不能使您專注於整個區域，但至少可以完成它說的工作，並且易於應用。

https://github.com/jonom/jquery-focuspoint

對我而言，這不是最理想的解決方案，但可能對某些人有所幫助。