0
我刚刚创建了一个图片库,我想知道如何使它响应并在移动设备上工作。 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;
}
变化'宽度:汽车;''到宽度:100%;' – Spade
化妆宽度100% – Diwas
即改变图像的高宽比 – Darkstar