html：图像在css中不改变大小

l7mqbcuq 于 2022-11-27 发布在其他

关注(0)|答案(4)|浏览(193)

我想用我的style.css更改我的图像大小，但它不适用。
以下是我的风格：

.headerImage {
    width: 100px;
    height: 100px;
}

下面是我如何插入我的图像：

<div class="headerImage">
            <img src="/images/header-image.png" alt="your image">
        </div>

我试过这个，它的工作，但我想有其他图像在不同的大小。所以这不是一个选项：

img {
width: 100px;
height: 100px;
}

4条答案

您正在调整父元素的大小。有多种方法可以修复此问题。
您可以：
将类移动到图像
第一个
在css中选择图像
第一次
或将图像大小更改为100%。
第一个

在HTML中尝试此操作

<div>
    <img class="headerImage" src="/images/header-image.png" alt="your image">
  </div>

试试这个：

.headerImage img 
  {
  width: 100px;
  height: 100px;
  }

可能是因为<div>元素与其结束标记不在同一缩进级别上。
所以，不妨试试：

<div class="headerImage">
    <img src="/images/header-image.png" alt="your image">
</div>