CSS自動適應圖像到屏幕當iPhone從肖像旋轉到風景

我想有一個圖像適合屏幕，而不是在縱向和橫向模式下裁剪，以響應設計。我試過了：CSS自動適應圖像到屏幕當iPhone從肖像旋轉到風景

<!doctype html> 
<html> 
<head> 
<style> 
img { 
    max-height:100%; 
    max-width:100%; 
} 
</style> 
<meta name="viewport" content="initial-scale=1.0" /> 
</head> 

<body> 
<center> 
<img src = "http://www.terragalleria.com/tmp/square.jpg" /> 
</center> 
</body> 
</html>

圖像是一個正方形。如果頁面在iPhone處於縱向方向時加載，則它會拉伸以填充屏幕的寬度，並在底部留出空間，這正是我想要的。

但是，如果我將iPhone旋轉到橫向，則圖像現在伸展以填充屏幕的寬度並在垂直方向上裁剪。我想要的是讓圖像伸展以填充屏幕高度，並在兩側留出空白區域。

爲了看到這一點，我需要重新加載頁面。有什麼方法可以在iPhone旋轉時實現正確的大小調整，而無需用戶重新加載頁面？

來源

2015-02-23 Quang-Tuan Luong

有可能幾個問題在這裏：

必須設置html和身體有身高：100％有任何的子元素知道什麼是「100％」的意思。
您的<center>標記不僅在HTML5中不推薦使用，但如果您不給它高度，則會導致問題：100％。

這裏是我的解決方案：http://jsfiddle.net/k74w8bcf/

這應該自動大小在水平和垂直調整大小以瀏覽器窗口（包括旋轉） - 作爲測試在iOS 8.1.3的工作。

來源

2015-02-23 20:24:26

很好的答案，謝謝！ – 2015-02-23 23:23:35

你介意接受它作爲答案嗎？不客氣！ – 2015-02-24 14:11:46

對不起，以前不明白那個功能！ – 2015-03-31 00:47:18

CSS自動適應圖像到屏幕當iPhone從肖像旋轉到風景

回答

相關問題