HTML/CSS中设置图片宽高不生效的原因咨询

你想要实现竖排的社交媒体图标栏效果，但为img标签设置的.social-media类宽高样式未生效，可能有以下几种原因及对应的解决办法：

可能的原因与解决方法 #

1. 图片标签自带行内宽高属性 #

如果你的img标签里直接写了width或height行内属性（比如<img class="social-media" src="./img/gmail.png" width="100">），行内属性的优先级会高于类选择器的CSS样式，导致你的设置被覆盖。
解决办法：删除img标签上的行内宽高属性，只保留类名和src属性。

2. CSS选择器优先级被覆盖 #

如果页面中存在其他优先级更高的CSS规则（比如使用id选择器、行内样式，或者带有!important的样式），会覆盖.social-media的宽高设置。
解决办法：

• 提高选择器的优先级，使用更具体的选择器：

li a img.social-media {
  height: 165px;
  width: 35px;
}

• 打开浏览器开发者工具（F12）查看元素的样式面板，找到被划掉的宽高规则，定位覆盖它的样式并调整。

3. 图片默认显示属性限制 #

img标签默认是inline替换元素，在部分布局场景下，可能需要明确设置display属性来确保宽高样式生效。
解决办法：给.social-media添加display: block或inline-block：

.social-media {
  display: block;
  height: 165px;
  width: 35px;
}

4. 图片宽高比强制限制 #

现代浏览器会默认保持图片的原有宽高比，如果你的宽高设置不符合图片比例，浏览器会自动调整其中一个值，看起来像是样式未生效。
解决办法：添加object-fit属性控制图片显示方式，比如保持比例填充容器：

.social-media {
  height: 165px;
  width: 35px;
  object-fit: cover; /* 或contain，根据需求选择 */
}

5. CSS文件未正确加载 #

如果CSS文件路径错误，或者没有正确引入到HTML中，样式自然不会生效。
解决办法：检查HTML中的<link>标签，确保CSS文件路径正确；或者将样式直接写在HTML的<style>标签内进行测试。

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