这是 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 进阶指南，让我们一起成长。
