移動設備上的圖片庫

我剛剛創建了一個圖片庫，我想知道如何使它響應並在移動設備上工作。 https://willhay.io/photography/benches/ 現在，如果你在iPhone上拉起它看起來很糟糕。圖像佔用'100vh'，所以整個屏幕的高度。在橫向模式下它看起來很好，雖然它變得很奇怪。在縱向模式下，由於圖像佔據了屏幕高度的100％，因此寬度溢出並且不適合屏幕。移動設備上的圖片庫

我如何在移動設備上使用它，它會填充100％的寬度並垂直居中？

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"/> 
<!-- <meta name="viewport" content="width=device-width, initial-scale=.5" > --> 
    <title>Bay Trail Benches</title> 
    <link rel="stylesheet" href="../../css/photography.css"/> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" /> 

</head> 

<body> 
     <a class="xButton" href="../../photography">✕</a> 
     <a class="rightButton" href="../gazing-up">⇒</a> 
     <a class="leftButton" href="../columns">⇐</a> 
     <img class="wideImage" alt="benches" src="../images/benches.jpg"> 
</body> 
</html>

CSS

.wideImage { 
    height:100vh; 
    width:auto; 
    display:block; 
    margin:auto; 
}

來源

2015-07-02 Darkstar

變化'寬度：汽車;''到寬度：100％;' – Spade

化妝寬度100％ – Diwas

即改變圖像的高寬比 – Darkstar

它需要一些更多的CSS，因爲你的HTML不是結構非常好。

.wideImage { 
    max-width: 1200px; 
    width: 100%; 
    display:block; 
    z-index: -1; 
    margin:auto; 
    height: auto; 
    max-height: 100%; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
html, body { 
    height: 100%; 
}

來源

2015-07-02 23:46:48 Wazaaaap

移動設備上的圖片庫

回答

相關問題