Html 移动设备上的图像库_Html_Css_Image_Mobile_Responsive Design

Html 移动设备上的图像库

html css image mobile responsive-design

Html 移动设备上的图像库,html,css,image,mobile,responsive-design,Html,Css,Image,Mobile,Responsive Design,我刚刚创建了一个图像库，我想知道如何使其响应迅速并在移动设备上工作。现在如果你把它放在iPhone上，它看起来很糟糕。图像占用“100vh”，因此整个屏幕的高度。在横向模式下，它看起来不错，尽管它会奇怪地缩小。在纵向模式下，由于图像占据屏幕高度的100%，因此宽度溢出，不适合屏幕我如何使它在移动设备上如此，它占据了100%的宽度，并且垂直居中 <!doctype html> <html> <head> <meta charset="UTF-8

我刚刚创建了一个图像库，我想知道如何使其响应迅速并在移动设备上工作。现在如果你把它放在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，因为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%;
}

更改<代码>宽度：自动至<代码>宽度：100%

.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%;
}