如何通过Style.css文件调整HTML中图片的尺寸？

下面是几种通用的实现方式，可根据你的需求选择：

1. 全局统一所有图片样式 #

直接给<img>标签设置全局样式，适合需要所有图片保持一致尺寸的场景：

img {
  /* 固定宽度，高度自动适配比例，避免变形 */
  width: 320px;
  height: auto;

  /* 响应式场景推荐：图片最大宽度不超过容器，高度自适应 */
  /* max-width: 100%; */
  /* height: auto; */
}

2. 针对特定类别的图片 #

给需要调整的图片添加自定义类名，实现精准控制：
HTML代码示例：

<img class="banner-img" src="your-image.jpg" alt="banner">
<img class="thumbnail" src="thumb.jpg" alt="thumbnail">

对应的CSS：

/* 横幅图片样式 */
.banner-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover; /* 铺满容器，裁剪多余部分，保持比例 */
}

/* 缩略图样式 */
.thumbnail {
  width: 120px;
  height: 120px;
  object-fit: contain; /* 完整显示图片，不裁剪，空白部分留空 */
}

object-fit常用值说明：

• cover：保持比例，铺满容器，超出部分裁剪
• contain：保持比例，完整显示图片，容器留白
• fill：默认值，拉伸图片填满容器（可能变形）
• none：保持图片原始尺寸，超出容器部分裁剪

3. 针对特定容器内的图片 #

如果只需要调整某一容器下的图片，使用后代选择器：

/* 仅调整article容器内的图片 */
article img {
  width: 85%;
  height: auto;
  margin: 0 auto; /* 可选，让图片居中 */
}

注意事项 #

• 若HTML中存在内联样式（如<img width="200">），CSS需要更高优先级才能覆盖：

  /* 用类选择器+!important强制覆盖（非必要不推荐，建议移除内联样式） */
  .custom-img {
    width: 300px !important;
    height: auto !important;
  }
  

• 优先使用width + height:auto或max-width/max-height组合，避免同时固定宽高导致图片变形。

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