如何獲得4個較大的圖片HTML Wordpress

Question

在Apple.com上的幻燈片下方的主頁上，您會看到4個可點擊的帖子/圖片，當您縮放瀏覽器窗口（或使用手機或平板電腦）時，它們會根據比例進行縮放。

他們是一個模仿這種行爲或HTML代碼的Wordpress插件嗎？

在哪裏可以將4張圖像縮放到UI，簡單的HTML代碼？

我知道有插件可以用最新的帖子做這件事，但它不是我想要的。先謝謝你。

Example image

Answer 1

他們正在使用的背景大小屬性。所做的就是確保圖像包含在父元素中，並放大或縮小以確保其寬度和高度均爲100％，但仍位於父容器內。

它接受幾個屬性。這裏是browser support的表格。

background-size: contain; 

包含父元素內的圖像和不溢出。

background-size: cover; 

確保背景圖像覆蓋了它應用到的元素的全部寬度和高度。它不會歪斜寬高比，它只會將元素溢出到正確的大小以保持寬高比。此外，請注意，您可以使用像素和媒體查詢來明確設置圖像寬高比。這看起來像這樣，按照寬度和高度的順序排列，如果你使用一個值而不是兩個，那也是可行的。

background-size: 250px 150px; 

請注意，背景圖像包含在它所應用的元素中。所以儘管技術上溢出當使用封面，它不會在視覺上溢出元素所以它看起來不雜亂。