在开发网站时，大家时常会遇到一些看似很小，但因为关联到了其他地方，所以调整起来会比较麻烦的问题，然后就会很头疼。

长沙网站建设将会总结一些过去实战项目中遇到不好处理的地方，同时来教您怎么解决。

在网站页面中展示的图片视频，一般不能直接写固定的宽度和高度，因为这样会让比例不一样的图片或视频产生变形，影响用户的浏览体验。

所以img或video标签一般是这样写：width：100%；height：auto；让宽度撑满整个容器，然后高度自适应变化。

为了看起来更美观，长沙网站制作也会在前期添加展示数据时，先将图片大小比例都处理好再进行上传，保证页面图片显示一致，让客户的观感更好。

但在正式上线后，网站后台会交由客户管理，客户上传图片的大小一般都不会一样，而在这方面他们并不是专业的，肯定不能要求客户每次上传时都将图片大小处理好。

虽然也可以通过增加裁剪工具控制图片的比例，但额外开发功能不仅会增加程序员后期的工作量，对客户的时间也会有影响。

那这种时候应该怎么处理？既保证页面显示的图片大小比例一致，又能减少客户上传时的操作步骤。

在以前只能通过给外层容器和图片，设置绝对定位和相对定位，再给容器设置 padding-bottom 根据偏移值的大小确定比例，如果 padding-bottom：30%，图片比例就是 10 ：3，如果是50%，则比例就是2 : 1。 这样能达到图片比例一致，大小一致的这种效果。

不过这种写法虽然能有效，但写起来也有点麻烦，首先是必须设置position属性还要计算具体比例，而且在Flexbox等布局中，如果没有定位元素没有设置好，高度还会显示异常。

那么有没有一种既简单又实用的新写法呢？有的！

长沙网站设计教您如何使用 aspect-ratio 与 object-fit: cover来控制图片与视频的比例。

aspect-ratio属性可以直接设定容器的比例，无论在里面有没有内容。若图片本身的宽度有600px, 那么添加 aspect-ratio：3 / 2 属性后，图片的高度就会锁定为400px。object-fit: cover 属性则可以让图片充满整个容器，并且保证不变形。不论图片真实的高宽怎么变化，这个比例都固定了。

并且这两个属性可以直接在img上添加上，不需要依靠外层容器来控制，简简单单两行代码就完成了上一种方法十多行才能达到的效果。

在建站初期就写好这个效果，既避免了在后期额外的工作量，也能让客户有更好的操作体验，非常简单和实用。

以上就是长沙网站开发在以往项目中总结出的，图片大小比例统一控制的方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.