时间戳

首页 > 解决方案 > 图像的宽度正在变化，但高度没有变化

html - 图像的宽度正在变化，但高度没有变化

问题描述

我想创建一个“包装器”，一个自动调整图像大小（在滑块中）以适应预定宽度和高度的 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 的 slick 用于滑块 js。但即使我删除了滑块的代码，我仍然无法调整高度（所以我猜这不是问题。）这是与滑块相关的 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>

标签： htmlcss

解决方案

你必须写

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

内联样式总是优先于 CSS 样式。您的样式表会覆盖宽度和高度属性，因此您需要切换到这种格式。

推荐阅读