使用CSS的box-sizing属性MDNdocs关于box-sizing一种解决方法是使用CSS的box-sizing属性来控制元素的盒模型。默认情况下，盒模型是"content-box"，这意味着元素的宽度和高度只包括其内容，而不包括padding和border。将box-sizing设置为"border-box"将会更改盒模型，使得元素的宽度和高度包括padding和border。*{box-sizing:border-box;}这样，元素的宽度和高度就包括了padding和border，就不会超出预算了。使用百分比值设置padding:使用百分比值设置padding可以避免固定像素值的

本文是系列第三篇。系列文章：现代图片性能优化及体验优化指南-图片类型及Picture标签的使用现代图片性能优化及体验优化指南-响应式图片方案图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。图片的宽高比、裁剪与缩放OK，下面进入到我们的第三个模块，图片的宽高比、裁剪与缩放。我们会介绍4个新的特性：aspect-ratioobject-fitobject-positionimage-rendering

本文是系列第三篇。系列文章：现代图片性能优化及体验优化指南-图片类型及Picture标签的使用现代图片性能优化及体验优化指南-响应式图片方案图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。图片的宽高比、裁剪与缩放OK，下面进入到我们的第三个模块，图片的宽高比、裁剪与缩放。我们会介绍4个新的特性：aspect-ratioobject-fitobject-positionimage-rendering