87,997
社区成员
发帖
与我相关
我的任务
分享JS怎么控制图片按照比例缩放？
通过富文本编辑框添加进去的数据，查出来后会有一些<img>的标签和图片，但是有的时候添加的时候图片过大，那么查出来后图片就会显示的很大，怎么能够通过JS来控制图片的大小，判断分辨率来控制图片比例缩放？
...全文
请发表友善的回复…
发表回复
枫之幻月 2017-12-21
- 打赏
- 举报
用css
.divcss img
{
max-width: 250px; /*这是DIV的大小*/
width: expression(this.width > 80 ? "80px" : this.width); /*实现按比例缩放*/
max-height: 230px;
height: expression(this.height > 80 ? "80px" : this.height); /*实现按比例缩放*/
}
顾小林 2016-03-08
- 打赏
- 举报
用 image onload() 回调的时候可以获取到宽高
斯洛文尼亚旅游 2016-03-07
- 打赏
- 举报
不需要js，移动端添加media query，用!important覆盖下style中的宽度就行
/*设备小于680，设置新闻详细中图片宽度100%，高度auto等比缩放*/@media screen and (max-width:680px){
#newbody img{width:100% !important;height:auto !important;}
}
/*更多的query选择移动端分辨率样式*/
Randy_hsu 2016-03-07
- 打赏
- 举报
<script type="text/javascript">
window.onload=function(){
var Ohtml=document.documentElement;
getSize();
function getSize(){
var screenWidth=Ohtml.clientWidth;
Ohtml.style.fontSize=screenWidth/(750/40)+'px'
};
window.onresize=function(){
getSize();
};
}
</script>
木头海上漂 2016-03-01
- 打赏
- 举报
css样式直接规定所有图片同规格显示
baidu_34026018 2016-02-29
- 打赏
- 举报
关键是从富文本编辑框里面添加的图片 不知道会有几张图片啊。这个方法只能对一张图片来实现吧
无爱大叔 2016-02-29
- 打赏
- 举报
+1
KK3K2005 2016-02-28
- 打赏
- 举报
img 宽高 默认情况是等比拉伸的
所以你 只要设置宽度就可以了 高度会自动等比的
hch126163 2016-02-28
- 打赏
- 举报
手机设置图片 max-width:100%;height:auto;
就好了
liusaint1992 2016-02-27
- 打赏
- 举报
可能我想复杂了。。。。你这个应该只需要设置宽为100%，高为auto就可以了嘛。
var img = document.getElementById('imgid');
img.style.width = "100%"
img.style.height = "auto"
liusaint1992 2016-02-27
- 打赏
- 举报
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<img id = 'imgid' src = "1.jpg" >
<script>
//如果图片过大，处理图片大小。使用要求：传递id和大小要求。示例：autoImgSize('img1',1000)
function autoImgSize(img,size){
if(!size){
size=1000;//设置默认最大值为1000
}
var imgobj= document.getElementById(img); //获取对象
imgobj.style.width = "auto";
imgobj.style.height = "auto"; //释放图片本来的大小
var imgwidth=imgobj.width;
var imgheight=imgobj.height;
if(imgwidth>imgheight){ //判断是width和height哪一个大。大的先处理。设置最大值size
if(imgwidth>size){
imgobj.style.width = size + "px";
}
imgheight=imgobj.height;
if(imgheight>size){
imgobj.style.height = size + "px";
}
}else{
if(imgheight>size){
imgobj.style.height = size + "px";
}
imgwidth=imgobj.width;
if(imgwidth>size){
imgobj.style.width = size + "px";
}
}
}
window.onload = function(){
autoImgSize('imgid',500);
}
</script>
</body>
baidu_34026018 2016-02-27
- 打赏
- 举报
PC端的显示效果
那么换成手机端就显示的特别大，这是我控制了宽度，显得就拉伸了很多
那么换成手机端就显示的特别大，这是我控制了宽度，显得就拉伸了很多
