CSS图片变大缩小？手把手教你快速调整图片尺寸

还在为CSS图片大小调整而烦恼吗？本文手把手教你如何精准控制图片尺寸，打造完美视觉效果。调整CSS图片大小的关键在于灵活运用`width`、`height`、`max-width`以及强大的`object-fit`属性。通过设置`width`和`height`可以直接控制图片尺寸，但要注意保持图片比例，避免变形。`max-width`则能轻松实现响应式图片，适应不同屏幕尺寸。`object-fit`属性更是神器，`cover`、`contain`、`fill`等值让图片完美适应容器。更有响应式图片`srcset`和`sizes`属性，以及SVG矢量图无损缩放、CSS Sprites优化技巧，让你的网页图片加载更快，更美观！ 更有图片加载失败占位符小技巧。

调整CSS图片大小的核心在于合理使用width、height、object-fit、max-width等属性。1. 设置width和height可直接控制图片尺寸，但需配合auto保持比例以避免变形；2. 使用max-width和max-height可限制图片最大尺寸，实现响应式设计；3. object-fit属性定义图片如何适应容器，常用值包括cover（覆盖容器并裁剪）、contain（完整显示并留白）、fill（拉伸填充）等；4. 响应式图片可通过srcset与sizes属性实现，根据屏幕尺寸加载不同大小的图片资源；5. SVG矢量图通过设置width和height实现无损缩放；6. CSS Sprites技术合并多图减少请求，提升加载速度；7. 图片加载失败时，可用::before伪元素结合content属性显示占位符信息。

调整CSS图片大小，核心在于控制width、height属性，以及灵活运用object-fit和max-width等属性，来实现响应式和精细化的图片显示效果。

控制图片大小的方法有很多，最直接的就是设置width和height，但要小心变形。

CSS图片大小调整教程

如何使用width和height属性调整图片大小？

这是最基础的方法。你可以直接在CSS中为标签或包含图片的容器设置width和height。

img {
  width: 300px;
  height: 200px;
}

但问题来了，如果图片的原始比例和设置的width、height比例不一致，图片就会变形。所以，通常建议只设置一个值，另一个值设置为auto，保持原始比例。

img {
  width: 300px; /* 高度会自动调整，保持比例 */
  height: auto;
}

或者

img {
  height: 200px; /* 宽度会自动调整，保持比例 */
  width: auto;
}

max-width和max-height有什么用？如何使用？

max-width和max-height可以限制图片的最大尺寸，防止图片超出容器。这在响应式设计中非常有用。

img {
  max-width: 100%; /* 图片最大宽度为容器的100% */
  height: auto; /* 高度自动调整 */
}

这样，图片会根据容器的大小自动缩放，但不会超过原始尺寸。如果原始尺寸小于容器，图片会保持原始大小。

举个例子，如果容器宽度是500px，图片原始宽度是800px，那么图片会缩小到500px。如果图片原始宽度是300px，那么图片会保持300px。

object-fit属性是什么？有哪些常用的值？

object-fit属性用于指定图片如何适应容器的大小。它非常强大，可以解决很多图片变形的问题。

常用的值有：

• cover: 保持图片的宽高比，缩放图片，使其完全覆盖容器。可能会裁剪图片。
• contain: 保持图片的宽高比，缩放图片，使其完全显示在容器中。可能会留白。
• fill: 默认值。拉伸或压缩图片，使其完全填充容器。图片可能会变形。
• none: 不缩放图片，保持原始大小。如果图片大于容器，会被裁剪。
• scale-down: 如果图片小于容器，则保持原始大小；如果图片大于容器，则效果和contain一样。

img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* 裁剪图片，使其完全覆盖容器 */
}

使用object-fit: cover时，图片会尽可能填满容器，但可能会裁剪掉超出容器的部分。

使用object-fit: contain时，图片会完整显示在容器中，但可能会在上下或左右留白。

如何实现响应式图片？srcset和sizes属性是什么？

响应式图片是指根据不同的设备和屏幕尺寸，显示不同大小的图片。这可以提高页面加载速度，优化用户体验。

srcset属性用于指定多个图片资源，sizes属性用于指定不同屏幕尺寸下，图片应该显示的大小。

<img
  src="image-300.jpg"
  srcset="image-600.jpg 600w, image-900.jpg 900w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33.3vw"
  alt="响应式图片"
/>

• srcset: 指定了三个图片资源：image-600.jpg、image-900.jpg和image-1200.jpg，分别对应600像素、900像素和1200像素的宽度。
• sizes: 指定了不同屏幕尺寸下，图片应该显示的大小。
  • 当屏幕宽度小于600像素时，图片宽度为100vw（视口宽度的100%）。
  • 当屏幕宽度小于900像素时，图片宽度为50vw（视口宽度的50%）。
  • 当屏幕宽度大于900像素时，图片宽度为33.3vw（视口宽度的33.3%）。

浏览器会根据屏幕尺寸和设备像素比，自动选择最合适的图片资源。

如何处理矢量图（SVG）的大小？

SVG是矢量图，可以无损缩放。处理SVG的大小，通常也是通过设置width和height属性。

<svg width="300" height="200">
  <circle cx="150" cy="100" r="50" fill="red" />
</svg>

或者在CSS中设置：

svg {
  width: 300px;
  height: 200px;
}

SVG的优势在于，无论放大多少倍，都不会失真。

如何使用CSS Sprites优化图片？

CSS Sprites是一种将多个小图片合并成一张大图片的技术。通过CSS的background-position属性，可以显示大图片中的某一部分。

使用CSS Sprites可以减少HTTP请求，提高页面加载速度。

比如，将三个小图标合并成一张大图片：

.icon1 {
  width: 20px;
  height: 20px;
  background-image: url("sprite.png");
  background-position: 0 0;
}

.icon2 {
  width: 20px;
  height: 20px;
  background-image: url("sprite.png");
  background-position: -20px 0;
}

.icon3 {
  width: 20px;
  height: 20px;
  background-image: url("sprite.png");
  background-position: -40px 0;
}

background-position属性用于指定背景图片的位置。

图片加载失败时，如何显示占位符？

可以使用CSS的::before伪元素和content属性，在图片加载失败时显示占位符。

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  background-color: #eee; /* 占位符背景色 */
}

img::before {
  content: "Image not found"; /* 占位符文字 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #999; /* 占位符文字颜色 */
}

img:not([src]) { /* 如果没有src属性，则显示占位符 */
  content: "No image";
}

img:not([src])::before {
  content: "No image";
}

这段代码会在图片加载失败或没有src属性时，显示一个灰色的占位符，并显示 "Image not found" 或 "No image" 的文字。需要注意的是，object-fit: cover 可能会影响占位符的显示效果，需要根据实际情况进行调整。

到这里，我们也就讲完了《CSS图片变大缩小？手把手教你快速调整图片尺寸》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于响应式图片,object-fit,SVG,width/height,CSS图片大小的知识点！