Question

我正在使用HTML，CSS，jQuery，slick.js滑块和Bootstrap CSS框架来设计模板。

我想实现一个无论分辨率如何都占据屏幕宽度100％的滑块，并且在同一个滑块上，无论图像的宽度是长还是小，我都希望保持图像的纵横比。

我保持了滑条图像的长宽比，但是并没有采用全宽。

屏幕截图如下：

我希望该图像占据所有设备的屏幕的整个宽度。

为此，它也必须将其覆盖在图像上看到的框中。

我的HTML代码是：

angular.module("myApp", [])
.controller('firstCtrl', function($scope){
    $scope.tempInput = 'тестовое задане';
    $scope.tasksArray = ['this task', 'second task'];
});

我的CSS代码是：

<div class="container">

  <div class="col-md-12">

    <div id="background-slider">

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-1.jpg" 
           alt="image-1">

       </div>

      </center>

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-2.jpg" 
           alt="image-2">

       </div>

      </center>

      <center>

       <div class="w-100-perc-h-48-2-em-aspect">

         <img class="max-height-100-perc-width-auto" src="image-2.jpg" 
           alt="image-2">

       </div>

      </center>

   </div>

  </div>

 </div>

我的jQuery光滑滑块是：

.w-100-perc-h-48-2-em-aspect{
    width: 100% !important;
    height: 48.2em !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

.max-height-100-perc-width-auto{
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
}

@media (max-width: 1290px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 48.2em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 1080px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 39.6em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 980px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 29.94em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 520px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 15.4em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 385px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 14em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 370px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 13em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}
 @media (max-width: 330px){
    .w-100-perc-h-48-2-em-aspect{
        width: 100% !important;
        height: 11.3em !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }
}

即使是小图像，图像也必须看起来不错且清晰。

如果有其他替代方法或其他选择或创造力，我们将不胜感激。

Answer 1

将“ img”图像设置为“ div”背景图像

your-div {
width : 100%;
Height : 100px;
Background-image : url ('file.jpg'); /*this one*/
Background-position : center;
Background-size : cover;
}

让您的“ div”为空，不包含任何“ img”内容。

<div class="your-div"></div>

然后是幻灯片放映功能。

全屏幕滑块，适用于所有屏幕，并保持宽高比，可显示较小的图像

1 个答案: