这篇文章是系列的第三篇。系列文章：

现代照片性能优化和体验优化指南-照片类型和Picture标签的现代照片性能优化和体验优化指南-反应式绘画情景绘画资源在我们的工作中占据了很大的一部分。尤其是带宽消耗巨大。

对绘画进行性能优化和经验优化在今天尤为重要。本文从各个方面介绍了在充满各种新功能的今天，如何尽可能多地使用照片资源进行性能优化和经验优化。

图片的宽高比、裁剪与缩放

OK，转到第三个模块。图片的长宽比、裁剪和缩放。我来介绍四项新功能。

aspect-ratio object-fitobject-position image-rendering

使用 aspect-ratio 避免布局偏移

很多情况下只能使用固定大小的图片，布局如下：

相应的布局：

Ul class=& amp# 039；g-container & amp；# 039；Li imgsrc=& amp# 039；http://placehold . it/150 x 100 & amp；# 039；p图片说明/p/Li/ulul Li img {WIP }当然，假设后端接口有大小异常的图片，那么上述未受保护的布局可能会出现问题。

因此，对于图片，为了避免图片大小错误导致的布局问题，最好始终同时使用高度和宽度。

Ulliimg {宽度：150px海特：100px}此外，在img标签上同时写入高度宽度，可以在图片未加载之前提前就位，从而避免在图片未加载的情况下，渲染完成状态高宽度更改导致的重排问题。

当然，直到今天，我们还可以使用aspect-ratio来设置图片的长宽比。

Aspect-ratio CSS属性指定容器所需的长宽比。此长宽比可用于计算自动大小和为其他布局函数提供服务。

如上面的代码所示，我们可以改为：

Ulliimg {宽度：150pxaspect-ratio:3/2；}当然，有时我们的布局是反应式动态的，容器的宽度也不确定，所以使用aspect-ratio可以使我们的写法更方便。

Ulliimg {宽度：100%；aspect-ratio:3/2；}其中容器基于Flex弹性布局或响应布局，宽度不固定，但图片的长宽比是固定的。aspect-ratio: 3/2非常适合这种情况。

使用名为Aspect-ratio的CSS的最新属性，无论父元素的宽度如何，始终可以自动获得正确的长宽比。

当然，aspect-ratio不仅在此处可用，在aspect-ratio出现之前，只能通过其他Hack方法(如padding-top设置)模拟固定长宽比。Aspect-ratio之后，我们终于有能力设置容器的固定长宽比了。

object-fit 避免图片拉伸

当然，限制高度也可能是个问题。很难看，比如画拉伸。

此时，您可以使用object-fit指定可替换元素的内容(即图片)如何根据父容器的高度进行调整。

Ulliimg {宽度：150pxaspect-ratio:3/2；object-fit:cover；}使用object-fit: cover使图片内容填充元素的整个内容框，同时保持屏幕比例。

Object-fit的值为fill、none、contain和cover，与background-size类似，可以比喻内存。

看这幅画，很容易理解。

Object-fit还具有一个名为object-position的辅助属性，用于控制图片在内容框中的位置。(类似于background-position)默认值为object-position: 50% 50%。如果不想将图片居中，可以使用它来更改实际显示的帖子。

Ulliimg {宽度：150pxaspect-ratio:3/2；object-fit:cover；object-position:50% 100%；}

这样，“object-position: 100% 50%”表示开始在底部显示图片。有助于理解Object-position的好Demo。

CodePen Demo - Object position

使用 image-rendering 设置图片缩放算法

image-rendering比上述几项新功能更加冷淡。

通常在页面上以200px x 200px显示图片，但图片的原始大小可以是800px x 800px或50px x 50px。

此时，可以使用image-rendering设置放大状态下图片的显示算法。

图像渲染可以在特定场景中产生惊人的效果。

如果你看到这样有趣的DEMO，假设有原始的图片效果，即100px x 100px大小的qual(QR)代码。

如果我们把它放大，很明显，这个qual(QR)代码会这样扭曲。

好的，对于这种放大扭曲，可以使用图像渲染来更改照片放大算法。image-rendering: pixelated:

.img { image-rendering:pixelated；}效果将更改，如下图所示。

Image-rendering: pixelated处理的图像变得如此清晰！

code pen demo-QR code image-rendering demo

让我们看一下图像渲染的一些价值。

从image-rendering:auto:Gecko 1 . 9(Firefox 3 . 0)开始，Gecko使用双线性算法执行重采样(高质量)。Image-rendering: smooth:与图像image-rendering:high-quality:smooth相同，但更喜欢高质量缩放，使用最大化图像客观识别的算法。Image-rendering: crisp-edges:必须使用有效地保持图像对比度和边缘的算法来调整图像的大小，该算法不会使颜色变得柔和，也不会在处理过程中使图像变得模糊。适当的算法包括最近邻(nearest-neighbor)算法和其他非光滑缩放算法，如2SaI和hqx-*系列算法。这个属性值适用于像素艺术作品，例如某些网页游戏中的图像。Image-rendering: pixelated:放大图像时使用最近的邻居算法，因此图像看起来由大像素组成。缩小图像时，算法与自动相同。规范定义了许多值，但实际上现代浏览器默认情况下仅支持auto、pixelated和-Webkit-Optimize-Contrast(Chrome下的smooth)。

看说明可能都很愚蠢，实际使用时最好各试一试，确认一下效果。综上所述，image-rendering的作用是在缩放图像时提供多种渲染方式，使图片的显示形式多样化，或将图片失真造成的信息损失降至最低。

让我们再看一个演示。原件如下。

实际效果：

当然，pixelated的效果看起来很好。因为这是一幅偏向矢量的画。细节不多。高精度人像图不适合pixelated。照片容易马赛克。

真正想要的是crisp-edges效果，放大后尽量不失真，目前浏览器还没有实现。你可以在后面期待。

code pen demo-image-rendering demo

总结一下

本章介绍以下四种新的CSS功能：

Aspect-ratio:控制容器的长宽比、防止布局偏移和防止抖动object-fit:设置如何将内容应用于使用高度和宽度确定的框；根据防止拉伸图片object-position: object-fit设置图片实际设置

当然，本文是现代照片性能优化和经验优化指南的第三篇文章，接下来的内容如下：

懒惰的负载/异步图像解码方案的可访问性、图片资源的容错性和错误处理的最新解决方案可能会引起关注。

最后

OK，这篇文章到此为止。希望这篇文章对你有帮助。）

从Get到最有趣的CSS信息，不要错过我的公众号ICSS前端轶事。

更多CSS技术文章摘要内Github - iCSS、持续更新、STARS订阅收藏开始。

如果有更多的疑问或建议，可以多交流，原创文章、文笔有限，才能和学识浅，文章有不正之风，请告诉我。