使用JS实现HTML限定图像最大尺寸并等比例显示

最新推荐文章于 2022-02-17 15:06:43 发布

且_听_风_吟

最新推荐文章于 2022-02-17 15:06:43 发布

阅读量2.5k

点赞数

分类专栏： WEB前端文章标签： html jquery 图片

本文链接：https://blog.csdn.net/huitoukest/article/details/51169039

版权

WEB前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

调用js函数，传入Jquery对象即可：

                                      function setImgAdaptContainer(imgSelector,containerSelector){
						var _img=$(imgSelector);
						var container=$(containerSelector);
						setImgAdaptContainerByObj(_img,container);
					}
					function setImgAdaptContainerByObj(imgObj,containerObj){
						var _img=imgObj;
						var container=containerObj;
						var containerHeight=container.height()*0.99;
						var containerWidth=container.width()*0.99;
						var imgHeight=0;
						var imgWidth=0;
							_img.removeAttr('height'); _img.removeAttr('width');
							imgHeight=_img.height();
							imgWidth=_img.width();
					
						if(imgHeight/imgWidth<containerHeight/containerWidth)
						{
						_img.css('height','auto');
						_img.css('width','99%');
						}else{
							_img.css('height','99%');
							_img.css('width','auto');
						}						
					}