这是 CSS 进阶指南系列文章，本文主要介绍了 CSS 中处理图片时容易被忽略的细节，通过阅读本文，你将学习处理图片失真、背景图片重复、图片上的文字、图片内边框等内容。

CSS 进阶指南系列文章：

• 你需要知道的 CSS 技巧

图片失真

有时候我们需要展示的是用户上传的图片，所以宽高比很可能是不一致的，我们也很难去控制宽高比。这个例子中，看上去是没有问题的。它的图片比例是 1:1。但是当用户上传了不同尺寸的图片时，它会被拉伸。实际上用户上传的图片时这样的解决这个问题的最简单方案是使用 object-fit 属性，值设置为 cover。这样它就可以确保图片不会被拉伸。

背景图片重复

我们使用大图片作为背景图时，偶尔会忘记考虑在不同屏幕上的显示情况。在我们预期的屏幕上，图片的显示可能是这样。但是在大屏幕上，它的显示可能是这样。为了避免这种情况，我们可以使用 background-repeat，把它的值设置为 no-repeat。这样它就不会出现背景图片重复的现象了。同时我们可以使用 background-color 设置背景色，使用 background-size 来决定背景图的宽高占比。

图片上的文字

这是一个在图片上悬浮的文字。当发生意外图片没有被加载出来时，会出现下面这张现象。这是添加了文字阴影的效果，如果没有添加文字阴影，页面将会空白。解决这种问题的办法是给图片设置能和文字形成对比的背景色。比如文字是白色，那就把图片的背景色设置成深灰色。

图片内边框

在处理用户头像时，我们应该用清晰的方式显示它们。有些头像边缘的颜色非常亮，会和背景融为一体，特别是边缘有白色背景的头像。通过上面两张头像的对比，我们可以看到右侧小猫头像显示的尺寸会比实际头像的尺寸小很多，因为小猫头像的图片周围本身就带有白色背景，和页面的背景混合了。这样对用户来说很不好。解决方式是给图片添加内边框。注意是内边框而不是边框。下面这是添加了边框的效果。下面是添加内边框的效果。仔细观察，边框的颜色会跟随图像边缘的颜色，而不是纯色。我们甚至可以用它去适配暗色主题。这是使用边框做不到的。但是，在 CSS 中为 img 元素添加内边框是做不到的。所以，我们需要将 img 包裹到一个容器元素中，并在容器元素里面添加内边框。

<div class="card__avatar">
  <img src="image.jpg" alt="" />
  <div class="border"></div>
</div>

.card__avatar {
  position: relative;
}

.card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.border {
  position: absolute;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 2px solid #000;
  border-radius: 50%;
  opacity: 0.1;
  top: 0;
  left: 0;
}

如果你对 CSS 的内容感兴趣，欢迎关注我的新专栏 CSS 进阶指南，让我们一起成长。