在手机屏幕上无法完全看到幻灯片

编程问答 2022-06-13

问题描述

如您在这张照片中看到的：https://postimg.cc/YLC0cnsY幻灯片的照片未在手机屏幕上完整显示。我想完整地查看它，以便使其适合屏幕，并在可能的情况下进行引导。在计算机中显示正确，但问题出在可移动的屏幕中。这是我的CSS代码和HTML代码：

.contenedor{

width:485px;
height:540px;
margin :auto;
}
 
 .slick-prev:before,.slick-next:before { 
    color:black !important;
}

    <html>
    <head>
        <title>Slide</title>
        <Meta charset="utf-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="js2/slick/slick.css">
        <link rel="stylesheet" href="js2/slick/slick-theme.css" charset="UTF-8">
        <link rel="stylesheet" href="css2/estilos.css?<?PHP echo date('l jS \of F Y h:i:s A'); ?>">
        <LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
    </head>
    <body>

    <div class="container-fluid">
    <div class="contenedor">
    <div class="slideshow2" >
            <div class="slide slide1">
            <a href="blog_principal.PHP"><img src="img2/1.jpg" class="img-fluid"></a>
            </div>
            <div class="slide slide1">
            <a href="blog_principal.PHP"><img src="img2/2.jpg" class="img-fluid"></a>
            </div>
            <div class="slide slide1">
            <a href="blog_principal.PHP"><img src="img2/3.jpg" class="img-fluid"></a>
            </div>
            <div class="slide slide1">
            <a href="blog_principal.PHP"><img src="img2/4.jpg" class="img-fluid"></a>
            </div>
            <div class="slide slide1">
            <a href="blog_principal.PHP"><img src="img2/5.jpg" class="img-fluid"></a>
            </div>
    </div>    
    </div>    
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js2/slick/slick.min.js"></script>
    <script>
    $(".slideshow2").slick({
            dots:true,arrows: true,fade:false,autoplay:true,centerMode: false,//centrar foto
        slidesToShow: 1,slidesToScroll: 1


    });
    </script>  
    <script src="js/popper.min.js"  type="text/javascript"></script>
    <script src="js/jquery-3.5.1.slim.min.js"  type="text/javascript"></script>
    <script src="js/utilidades.js"  type="text/javascript"></script>
    </body>
</html>

解决方法

尝试一下：

HTML:
 <!DOCTYPE html>
      <html lang="en">
      <body>
      <div id="slideshow">
      <center>
  <img src="src of your first img" height="400px">
      </center>
      </div>
      </body>
      </html>
         
    

    

CSS:

    

 <style>
      #slideshow {
      border: solid 20px;
      margin: 0 auto;
      background-color: black;
      display: table;
      height: 40%;
      width: 100%;
    }
    </style>


    

JavaScript:

    

 <script>
      let adding = 1;
      setInterval(function () {
      document.getElementById("simg").innerHTML =
      "<img src=\"p" + adding + ".jpg\" height=\"400px\"/>"
      adding++
      if (adding > 8) {
      adding = 1
      }
      },3000);
      </script>

将您的img命名为p1.jpg，p2.jpg等。 我这样命名。如果你想你可以改变，但也要改变 脚本中带有您的img名称的第4行。

使其适合移动设备引导程序上的屏幕。

,

感谢您的回答，但我终于解决了，它设置了max-width和max-height而不是width和height：

.contenedor{
max-width: 485px;
max-height: 540px;
margin:auto;     
}

并从幻灯片代码上的图像中删除class =“ img-fluid”。

htmlresponsive-designslideshow