【发布时间】：2020-10-08 22:52:00
【问题描述】：
我刚刚在移动设备上查看了我的网站，它在横向上看起来很棒。但是，在纵向模式下，图像仅占页面的一半。它还会缩小我的徽标，这也是一个问题。
图像显示在我在 HTML 和 CSS 上创建的滑块中。
我也在使用 bootstrap 4，但是在我将 bootstrap 添加到我的代码之前我也遇到了这个问题。
请参阅下面的 x2 图片，了解它目前在移动设备上的外观和 x1 图片，了解我希望它在纵向时的外观。
PORTRAIT - HOW IT CURRENTLY LOOKS
LANDSCAPE - HOW IT CURRENTLY LOOKS (happy with this)
PORTRAIT - HOW I WOULD LIKE IT TO SIT ON SCREEN
我试过了：
- 在 CSS 中将宽度/高度设置为 100%
- 添加视口元标记以阻止其在移动设备上缩放
- 使用@media 标签更改滚动条的高度（这样它不会影响桌面查看）
请参阅下面的当前 HTML 和 CSS。
HTML
<html>
<head>
<style>
/* hide mobile version by default */
.my-navbar .mobile {
display: none;
}
/* when screen is less than 600px wide
show mobile version and hide desktop */
@media (max-width: 600px) {
.logo .mobile {
display: block;
}
.logo .desktop {
display: none;
}
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="main.css" rel="stylesheet" type="text/css" />
<title>???? shannonkelseyann</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="../websitehtml/images/white-heart.png"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="index.html"><img class="home" src="https://i.imgur.com/c2UQ8om.png"></a>
<a class="nav-item nav-link" href="campaign.html"><img class="campaign" src="https://i.imgur.com/cQE71uK.png"></a>
<a class="nav-item nav-link" href="e-commerce.html"><img class="e-commerce" src="https://i.imgur.com/01tEvO3.png"></a>
<a class="nav-item nav-link" href="info.html"><img class="info" src="https://i.imgur.com/JjNQ54R.png"></a>
</div>
</div>
</nav>
<div class=logo>
<img src="../websitehtml/images/desktoplogo1.png" class="desktop">
<img src="../websitehtml/images/mobile-logo.png" class="mobile">
</div>
<div class="slider">
<div class="slide" id="slide-1"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/2.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-2"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/1.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-3"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/3.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-4"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/4.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-5"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/5.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-6"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/6.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-7"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/7.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-8"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/8.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-9"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/9.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-10"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/10.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-11"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/11.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-12"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/12.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-13"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/13.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-14"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/14.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-15"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/15.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-16"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/16.jpg" height="100%" alt="♥"></div>
<div class="slide" id="slide-17"><img class="tenerife-womens" src="../WEBSITEHTML/IMAGES/tenerife-WOMENS/17.jpg" height="100%" alt="♥"></div>
</div>
</body>
<footer><p style="text-align: center;">© 2020 by shannonkelseyann</footer></p>
</html>
CSS
background-image: url(../WEBSITE/bluebackground.jpg);
background-repeat: repeat;
background-size: cover;
background-color: #8DB6E4;
width: 100vw;
height: 100vh;
background-position: center center;
position: relative;
text-align: left;
margin: 0px;
}
div {
margin: 0px;
padding: 0px;
}
footer {
color: white;
padding-bottom: 1px;
font-family: arial;
font-size: 10pt;
float: center;
}
h2 {
padding-left: 24px;
padding-top: 0px;
}
.row {
padding: 5%;
}
.slide {
flex-shrink: 0;
height: 100%;
width: 100%;
padding: 3px;
margin: 0px ;
}
.slider {
width: 1400px;
height: 650px;
display: flex;
overflow-x: auto;
margin: 11px ;
padding: 0px ;
padding-top: 0px;
}
.slider {
...
-webkit-overflow-scrolling: touch;
}
.navbar {
float: left;
padding-top: 18px;
}
.my-navbar {
flex-shrink: 0;
display: flex;
overflow-x: auto;
}
不知道我做错了什么，但任何帮助将不胜感激。 提前谢谢你，
【问题讨论】：
标签： html css slider image-scaling mobile-devices