给网页添加图片后，经常碰到原始尺寸过大把容器撑破的情况。调整CSS图片大小不是简单写一个宽度就完事，还需要考虑比例、容器约束以及不同场景下的裁剪策略。最常见的做法是直接设置宽度和高度，但在响应式布局、缩略图生成、背景图适配等场景下，又有各自更合适的写法。
基础做法：直接设置width和height
控制图片尺寸最直接的方式就是用CSS给图片指定宽度和高度。比如想把一张图片显示为400像素宽、300像素高，可以这样写：
img {
width: 400px;
height: 300px;
}
这种写法的优势是简单明确，适合对尺寸有严格要求的场景，比如固定版块中的图标或者宣传图。需要注意的是，如果只设置宽度而不设置高度，浏览器默认会保持图片原始比例自动计算高度，这通常是符合预期的。但如果同时设置宽度和高度，并且两者的比例与图片原始宽高比不一致，图片就会被拉伸变形。因此在使用固定宽高时，要提前确认原始图片比例，或者配合下一节提到的object-fit属性来避免变形。
除了像素值，width和height也支持百分比、rem、vw等相对单位。例如width: 50%表示图片宽度占其父容器宽度的一半。使用百分比时高度如果设为auto，图片依然会保持比例。不过要注意，百分比是相对于父元素内容区计算的，父元素必须有明确的宽度参考，否则百分比可能会失效。
响应式控制：max-width与height: auto
移动端和桌面端屏幕宽度差异很大，固定像素尺寸往往不能让图片在所有设备上都表现良好。响应式设计中常用的技巧是限制图片最大宽度不超过容器，同时让高度自动调整。
img {
max-width: 100%;
height: auto;
}
上面这段代码的含义是：图片实际显示宽度最大只能等于父容器的宽度。如果图片原始宽度小于容器宽度，就按原始宽度显示；如果原始宽度大于容器宽度，就会被压缩到容器宽度。因为height被设置为auto，浏览器会根据宽度变化自动计算高度，从而保证图片比例不变，不会出现拉伸。这一小段代码可以解决大部分图文混排中的图片溢出问题，因此在很多重置样式表或基础样式中都能看到。
需要注意的是，max-width: 100%只对块级或inline-block元素生效较好，如果图片是行内元素且父容器宽度不确定，可能需要把图片设置为display: block。另外，如果图片本身分辨率很高，max-width只是限制显示大小，并不会减少加载的文件体积。要真正优化性能，还需要结合响应式图片的srcset和sizes属性，但那是HTML层面的工作，CSS在这里主要负责显示控制。
保持比例与裁剪：object-fit的妙用
当图片必须塞进固定宽高的容器中，比如卡片列表里的缩略图，直接用width和height强制拉伸会很难看。CSS的object-fit属性可以让我们指定图片如何适应它的内容框。常用的值包括fill、contain、cover、none和scale-down。
.thumbnail {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center;
}
其中cover是最常用的，它会让图片填满整个容器，同时保持原始比例，多余的部分会被裁剪掉。contain则相反，它让整张图片完整地显示在容器内，可能会留下空白区域。fill是默认值，会拉伸图片填满容器，容易变形。none表示保持原始尺寸，超出部分直接溢出。scale-down会在none和contain之间选择较小的显示效果。结合object-position可以控制裁剪时保留图片的哪一部分，比如center表示居中裁剪，left top表示从左上角开始裁剪。
需要说明的是，object-fit只对替换元素生效，最常见的就是img和video。普通div的背景图片不能使用object-fit，需要用background-size来控制。另外，object-fit的兼容性在现代浏览器中已经很好，但在一些非常老的浏览器版本中可能不被支持，需要适当考虑降级方案。
背景图片的尺寸控制：background-size
如果图片不是通过img标签插入，而是作为某个元素的背景图使用，那么控制大小的方式就不同了。背景图片默认会以原始尺寸平铺或放置在元素左上角，要调整它的显示尺寸，需要使用background-size属性。
.banner {
background-image: url("banner.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
background-size的常用值有auto、cover、contain以及具体的长度或百分比。cover与object-fit中的cover类似，让背景图片覆盖整个元素区域，同时保持比例，超出部分裁剪。contain则保证整张图可见，可能留白。也可以直接写两个值，例如background-size: 100% auto，表示宽度铺满，高度自动。还可以用具体的像素值精确控制背景图的显示尺寸。
在制作全屏首图或者大banner时，background-size: cover配合background-position: center是非常经典的组合，能适应不同屏幕比例而不变形。需要注意的是，背景图片不会影响元素的布局尺寸，只起装饰作用，所以元素本身的高度仍需要单独设置，比如padding-top、height或min-height等。此外，背景图在打印时默认可能不被输出，如果需要打印显示，需要在样式中额外设置打印规则。