CSS设置图片尺寸不生效问题求助

问题原因 #

你当前的CSS样式是作用在包裹图片的<div>元素上，而图片本身（<img>）的默认尺寸会优先显示，父元素的宽高不会自动传递给子元素的图片，所以设置没生效。

解决方案 #

方案1：直接给图片添加类（推荐） #

修改HTML，把headerImage类直接加到<img>标签上，让样式直接作用于图片：

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

CSS保持原有代码即可：

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

方案2：通过父元素选择器定位图片（无需修改HTML） #

如果不想调整HTML结构，可以使用CSS后代选择器，通过父元素的类选中内部的图片：

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

可选优化：避免图片变形 #

如果图片原生比例和设置的100x100不一致，可以添加object-fit属性控制缩放方式，防止拉伸变形：

.headerImage img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* 裁剪图片填充容器，保持比例 */
    /* 或者用 object-fit: contain; 完整显示图片，容器留空白 */
}

内容的提问来源于stack exchange，提问作者GhostLucas