JS怎么控制图片按照比例缩放?

baidu_34026018 2016-02-27 04:34:11
通过富文本编辑框添加进去的数据,查出来后会有一些<img>的标签和图片,但是有的时候添加的时候图片过大,那么查出来后图片就会显示的很大,怎么能够通过JS来控制图片的大小,判断分辨率来控制图片比例缩放?
...全文
2211 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
枫之幻月 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); /*实现按比例缩放*/
}
这样整个div下的图片就都按比例缩放了
顾小林 2016-03-08
  • 打赏
  • 举报
回复
用 image onload() 回调的时候可以获取到宽高
  • 打赏
  • 举报
回复
不需要js,移动端添加media query,用!important覆盖下style中的宽度就行
/*设备小于680,设置新闻详细中图片宽度100%,高度auto等比缩放*/@media screen and (max-width:680px){
#newbody img{width:100% !important;height:auto !important;}
}

/*更多的query选择移动端分辨率样式*/
通过@media screen控制网站在移动端显示
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
  • 打赏
  • 举报
回复
引用 3 楼 liusaint1992 的回复:
可能我想复杂了。。。。你这个应该只需要设置宽为100%,高为auto就可以了嘛。

var img = document.getElementById('imgid');
img.style.width = "100%"
img.style.height = "auto"
关键是从富文本编辑框里面添加的图片 不知道会有几张图片啊。这个方法只能对一张图片来实现吧
无爱大叔 2016-02-29
  • 打赏
  • 举报
回复
引用 4 楼 KK3K2005 的回复:
img 宽高 默认情况是等比拉伸的 所以你 只要设置宽度就可以了 高度会自动等比的
+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端的显示效果


那么换成手机端就显示的特别大,这是我控制了宽度,显得就拉伸了很多

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧