图片如何适配容器展示
时间：2023-04-05 15:14:42
HTML5
？图片的业务场景适配容器。容器的宽高是已知的，但是图片的宽高是未知的。需要在保持图片比例的情况下自适应显示在容器中。预期效果是红色方框就是容器。里面是图像元素的实现过程。第一种：通过css属性object-fit：containobject-fitCSS属性指定可替换元素的内容应该如何适应一定高度和宽度的框。它通常用于img和video标签。通常，这些元素可以被切割、缩放或直接拉伸以保持原始比例。<样式>.box{宽度：400px；高度：300px；边距：200px自动；边框：1px纯红色；}.img{宽度：100%；高度：100%；适合对象：包含；}
第二种：通过设置背景background-size：容器的containbackground-size:contain将图像扩展到最大尺寸，使其宽度和高度完全适合内容区域。所以容器会有一个空白的
第三种：flexlayout这种方式假设图片最大宽高为100%
类型4：js设置图片onload事件后，读取图片元素的宽高和父元素的宽高，计算比例后设置宽高，这里可以使用transform实现import{App}from"vue"constimgAuto={install(应用程序：应用程序）：无效{app.directive("imgAuto",{mounted(el:HTMLImageElement,binding){el.onload=()=>{const{clientWidth:parentWidth,clientHeight:parentHeight}=el.parentNodeasHTMLElementconst{width,height}=elletx=0,y=0,minThreshold=0if(binding.value){minThreshold=binding.value.minThreshold}//获取容器大小与图片大小的比例constwRatio=(parentWidth-minThreshold*2)/widthconsthRatio=(parentHeight-minThreshold*2)/heightconstfitRatio=hRatio
