Question

我想创建一个“包装器”，它是一个ID，可以自动调整图像大小（在滑块中）以适合预定的宽度和高度。到目前为止，图像会自动调整宽度，但不会自动调整高度，我一生都无法想到解决方案。这是代码。

CSS：

#wrapper {
    height: 400px;
    width: 450px;   
}

.imgC {
  border-style: solid;
  border-width: 3px;
  border-color: #ffffff;
  padding: 5px;
  max-width:100%;
  height:100%;
}

HTML：

<!--- Image Slider -->

<div id="wrapper">
  <div><img class="imgC" src="img/main.jpg" alt="First slide"></div>
  <div><img class="imgC" src="img/img1.jpg" alt="Second slide"></div>
  <div><img class="imgC" src="img/img2.jpg" alt="Third slide"></div>
</div>

如果要提一下，我正在使用Ken Wheeler的sl滑块。但是，即使删除了滑块的代码，我仍然无法调整高度的大小（所以我想这不是问题。）以下是与滑块相关的js：

<script type="text/javascript">
    $(document).ready(function(){
      $('.thing').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 2000

      });
    });
  </script>

Answer 1

您必须写

<img src="theSource" style="width:30px;height:30px;" />

内联样式始终优先于CSS样式。您的样式表将覆盖width和height属性，因此您需要切换到这种格式。

Answer 2

我想出了答案的答案。似乎应用于图像的max-width和max-height样式直接采用了parent属性，在本例中为非样式<div>。在删除每个图像的<div>之后，代码起作用了。编辑后的代码应如下所示：

CSS：

.imgC {
  border-style: solid;
  border-width: 3px;
  border-color: #ffffff;
  padding: 5px;
  max-width:100%;
  max-height:100%;
}

HTML：

<!--- Image Slider -->

<div id="wrapper">
  <img class="imgC" src="img/main.jpg" alt="First slide">
  <img class="imgC" src="img/img1.jpg" alt="Second slide">
  <img class="imgC" src="img/img2.jpg" alt="Third slide">
</div>

图像的宽度在改变，但高度没有

2 个答案: