拉伸圖像視口保持寬高比

HTML：

<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Fullscreen image</title> 
    </head> 
    <body> 
     <img src="https://cdn.discordapp.com/attachments/187205892989648897/251689220819648513/e448455be034a36f6e09b46e671bdfd1.png" alt="Loading..." id="slide" /> 
    </body> 
</html>

CSS：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

html, body { 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 

#slide { 
    width: 100%; 
    height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}

演示如何，我想要的東西看起來像：https://jsfiddle.net/fu3bL2Lx/1/

當您拉伸並調整瀏覽器大小時，圖片仍然會以垂直居中爲止d，同時也安裝在視口內，保持縱橫比。

這裏的問題是，當我點擊圖像周圍的空白，我仍然得到alert觸發了綁定到img

我敢肯定，這可能是與Flexbox，就可以解決，如果不是隻是經常取消display的價值，但我對此不是很瞭解。

來源

2016-11-25 user1263513

請提供相關代碼供我們在帖子中查看。 – LuudJacobs

這是因爲您的圖片仍佔據視口的100％。

width: 100%; 
    height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;

你實際的圖像保持正常的，因爲object-fit財產，MDN的：

對象配合CSS屬性指定一個替換元素的內容應適合其使用建立的盒子高度和寬度。

容納裝置：

被替換的內容的尺寸，而該元素的內容框內配合以保持其縱橫比它的具體對象的大小被解析爲抵靠元件的使用寬度和高度的包含約束。

這就是您可以單擊圖像周圍的空白的原因。

來源

2016-11-25 13:42:14 Roberrrt

在使用MDN之前，我已經查找過MDN上的「對象適配」，但我不知道更好，所以暫時與它一起使用。 – user1263513

我認爲這已解決了您的問題？ :)。 – Roberrrt

絕對不是，你複製粘貼'object-fit'和'contain'的定義，在使用它之前我已經閱讀過它，然後我沒有指出尋找解決方案的方向。 – user1263513

拉伸圖像視口保持寬高比

回答

相關問題