如何正确缩小div中的图像,使其适合

时间:2019-01-03 15:28:51

标签: javascript jquery html css slick.js

我正在尝试充分利用此扩展名http://kenwheeler.github.io/slick/

我已经设法将其实现到我的项目中,但是有一个小问题。

我添加到滑块中的图像无法完全显示,您只能看到其顶部。

我尝试使用Google搜索来看看是否还有其他人遇到了相同的问题,我还尝试查看了扩展名的设置,但似乎没有任何改变大小的方法,我还尝试了设置宽度和div中img的高度,使其变为现在的样子。

https://i.imgur.com/ng5qCV1.gifv

目标是使它们彼此相邻大约100x100像素,以便能够看到整个图像,并且中间留有一些空白。

$('.caro').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
.caro{
    hwidth: 60px;
    height: 45px;
    overflow: hidden;
    border: 1px solid black;
}

.caro img{
    width: 50%;
  height: 50%;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HMU</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/style.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="slick-1.8.1/slick/slick-theme.css" />



</head>

<body>



    <div class="caro">
        <div>
            <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="1">
        </div>
        <div>
            <img src="data:image/jpeg;base64,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" alt="2">
        </div>
        <div>
            <img src="https://cdn.vox-cdn.com/thumbor/BeOviHAqNV_jAaNSfjdqR2UB0Jo=/0x0:1600x1067/1200x800/filters:focal(672x406:928x662)/cdn.vox-cdn.com/uploads/chorus_image/image/60427353/11222_Dilling_001.0.jpg" alt="3">
        </div>
        <div>
                <img src="https://static.dezeen.com/uploads/2017/08/clifton-house-project-architecture_dezeen_hero-1.jpg" alt="3">
            </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/slick/slick.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

2 个答案:

答案 0 :(得分:0)

您可以显式设置Image的宽度和高度(至100px),但是您将无法控制所需的少量边距。为此,您需要不增加任何图像。并使用光滑的断点。

请参考光滑滑块的响应属性。

看看下面的代码是否可以解决您的查询,

$(document).ready(function() {
      $('.caro').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });
.slick-slide{
  padding:5px;
}

img{
  width:100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>HMU</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <!--link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /-->
</head>

<body>

  <div class="caro">
    <div>
      <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="1">
    </div>
    <div>
      <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="1">
    </div>
    <div>
      <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="3">
    </div>
    <div>
      <img src="https://static.dezeen.com/uploads/2017/08/clifton-house-project-architecture_dezeen_hero-1.jpg" alt="3">
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

</html>

答案 1 :(得分:0)

标记,请尝试使用适合对象的图像或背景尺寸的背景。

对象适合度: https://alligator.io/css/cropping-images-object-fit/