文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么我的图像不填充屏幕时，在移动设备上观看肖像？

问为什么我的图像不填充屏幕时，在移动设备上观看肖像？
EN

Stack Overflow用户
提问于 2020-06-18 18:59:07
回答 1查看 51关注 0票数 1

我刚刚在移动设备上查看了我的网站，它看起来很棒。然而，当保持在纵向模式时，图像只占页面的一半。它也缩小了我的标志，这也是一个问题。

图像显示在一个滑块中，我在HTML & CSS上创建了这个滑块。

我还在使用引导程序4，但是在将引导程序添加到代码中之前，我也遇到了这个问题。

请看下面的x2图片，它目前是如何在移动和x1的图像，我希望它也在肖像。

肖像画--它目前的样子

景观- IT目前的样子(对此很满意)

肖像-我希望它能坐在屏幕上

我试过：

  • 在CSS中将宽度/高度设置为100%
  • 添加viewport元标记以停止移动设备上的缩放
  • 用@media标记更改我的滚动体的高度(这样不会影响桌面查看)

请参阅下面的当前HTML和CSS。

HTML

代码语言：javascript
复制
<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

代码语言：javascript
复制
    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;

}

不知道我做错了什么，但是任何帮助都会很感激。提前谢谢你，

mobile-devices
html
css
slider
image-scaling
EN

回答 1

Stack Overflow用户

发布于 2020-06-19 01:37:29

尝试在您的图片的父<div class="col-12>"上使用以下类:屏幕中的全宽度<576‘s，屏幕上的全宽度在屏幕≥576’s中使用<div class="col-sm-12>"，在屏幕≥768‘s中使用<div class="col-md-12>"表示全宽度，在屏幕≥992’s中使用<div class="col-lg-12>"表示全宽度，在屏幕≥1200‘s中使用<div class="col-xl-12>表示“全宽”。确保所有的图片都在同一个div中，这样无论显示器的大小如何，它们都是响应的，而不是使用12作为全宽，您可以使用6，这样就可以将2幅图片显示在同一行中。有关列的更多信息，请查看此处的Bootstrap系统

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62457473

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档