内容简介：我们平时开发，后台通过在线编辑器，编辑帖子，上传图片，比如ckeditor配置上传图片，是可以设置图片大小的；这种设置对pc端的话 也许你设置个 800,600，还是可以的。
开发遇到的问题
我们平时开发，后台通过在线编辑器，编辑帖子，上传图片，比如ckeditor配置上传图片，是可以设置图片大小的；
这种设置对pc端的话 也许你设置个 800,600，还是可以的。
但是有没有考虑过移动端呢？
我们发现移动端的图片有一部分看不到的。
解决方案概述
对于图片的缩放，有两种解决方案；
一，设置img DOM的max-width为100%；
二，通过Js计算，来动态设置图片的宽度和高度；
这要分两种情况，来具体采用哪种方案；
情况一：图片宽度占据整个网页宽度解决方案
对于情况一，比如移动端，图片是占据整个网页宽度的，这种比较好解决；
我们加img css样式即可；
img{width:100%; max-width:100%;}
注意点：
使用这种方式，编辑器添加的图片不能设置height,否则高度不能等比例的缩小，图片会变形；
如下图：
上面没有设置 高度，下面的设置了高度；
用了max-width，虽然宽度都正常缩放了，但是高度的话，下面那个设置了height属性的，就变成了，没有和宽度一起等比例缩放；
情况二：图片宽度未占据整个网页宽度解决方案
对于大多数pc端，我们一般都是左右两块或者三块，所有图片的话，一般是不占据整个网页宽度的；如下图：
这里我们分成左右两块，我们如果上传了一个大图，不做等比例缩小处理的话，就会超过我们设置的左边区域的宽度，这样用户体验比较差；
这种情况我们不能用max-width，只能用js进行计算，动态修改img的宽度和高度；
如何来进行计算呢？
我们这里考虑两种情况，如下图：
一种是 没设置宽度高度，就纯img，还有一个是设置了宽度高度，有一个 style内联样式；
所以我们设计通用js方法的时候，需要传入三个参数，maxwidth，maxheight，还有一个是某个DOM里面的img；
我们规定好最大的宽度，最大的高度，和指定范围内的图片；
接下下方法具体实现，我们通过 getElementsByTagName('img') 可以指定DOM里的所有图片，然后遍历所有图片，
对每个图片的高度和宽度进行判断，是否超过设置的最高高度和宽度，假如超过了，我们就要通过等比例计算，把缩小后的宽度对应的高度进行计算，以及对缩小后的高度对应的宽度进行计算；
当然最终设置图片的height和widht的时候，我们记得也要重新设置下style内联样式；
完整实现代码：
function ResizeImages(maxwidth,maxheight,targetDom)
{
var myimg,oldwidth,oldheight;
var imgs = document.getElementById(targetDom).getElementsByTagName('img'); //如果你定义的id不是article，请修改此处
for(i=0;i<imgs.length;i++){
myimg = imgs[i];
if(myimg.width > myimg.height)
{
if(myimg.width > maxwidth)
{
oldwidth = myimg.width;
myimg.height = myimg.height * (maxwidth/oldwidth);
myimg.width = maxwidth;
myimg.style.cssText="height:"+myimg.height * (maxwidth/oldwidth)+"px;width:"+maxwidth+"px";
}
}else{
if(myimg.height > maxheight)
{
oldheight = myimg.height;
myimg.width = myimg.width * (maxheight/oldheight);
myimg.height = maxheight;
myimg.style.cssText="height:"+maxheight+"px;width:"+myimg.width * (maxheight/oldheight)+"px";
}
}
}
}
调用的话 body onload里即可；
<body onload="ResizeImages(800,1000,'content')">
这样就页面显示图片就协调多了；
最佳实践
在线编辑器，不设置widht和height；
pc端通过js计算，动态设置；
wap端设置max-width即可；
最佳实践，完美解决；
------------------------------------------------------------------------------------------------------------------------------
作者： j ava1234_小锋
出处： https://www.cnblogs.com/java688/p/13200262.html
版权：本站使用「 CC BY 4.0 」创作共享协议，转载请在文章明显位置注明作者及出处。
------------------------------------------------------------------------------------------------------------------------------
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Rem 等比适配始末
- JavaScript DOM元素长宽等比例缩放
- HQChart 1.9334 版本发布，增加等比坐标、黄金分割坐标、等分坐标
- 缩小是破坏我的AngularJs代码
- go服务docker实践-缩小镜像占用
- Laravel框架中缩小Vue应用的体积
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Security Testing Cookbook
Paco Hope、Ben Walther / O'Reilly Media / 2008-10-24 / USD 39.99
Among the tests you perform on web applications, security testing is perhaps the most important, yet it's often the most neglected. The recipes in the Web Security Testing Cookbook demonstrate how dev......一起来看看 《Web Security Testing Cookbook》 这本书的介绍吧!
