我刚刚在移动设备上检查了我的网站，它看起来很棒。但是，在纵向模式下按住时，图像仅填满页面的一半。它还缩小了我的徽标，这也是一个问题。
图像显示在我在HTML和CSS上创建的滑块中。
我也在使用引导程序 4，但是在将引导程序添加到代码中之前我也遇到了这个问题。
请参阅下面的x2图像，了解它目前在移动设备上的外观和x1图像，了解我也希望它在纵向上的外观。
肖像 - 目前的外观
景观 - 它目前的样子(对此感到满意(
肖像 - 我希望它如何坐在屏幕上
我试过：
- 在 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;
}
不知道我做错了什么，但任何帮助将不胜感激。 提前谢谢你，
尝试在图片的父<div class="col-12>"上使用这些类来表示屏幕 <576px 中的全宽，<div class="col-sm-12>"用于屏幕 ≥576px 中的全宽，<div class="col-md-12>"用于屏幕 ≥768px 中的全宽，<div class="col-lg-12>"用于屏幕 ≥992px 中的全宽，<div class="col-xl-12>" 用于屏幕 ≥1200px 中的全宽。确保所有图片都在同一个div中，以便无论显示器的大小如何，它们都是响应的，而不是使用12作为全宽，您可以使用6，以便在同一行中显示2张图片。有关专栏的更多信息，您可以查看此处 引导网格系统