限制图片宽度或高度

最新推荐文章于 2023-01-04 16:42:23 发布
最新推荐文章于 2023-01-04 16:42:23 发布
阅读量1k 收藏
点赞数
分类专栏： Javascript 文章标签： javascript xhtml class function html db2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lampsunny/article/details/7390147
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery限制图片宽度</title>
<script language="javascript" src="http://pay.fy5.com/statics/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" >
$(function(){
        var imgs=$('.asds img');
        imgs.each(function(){
            if($(this).width() >370){
                $(this).width(370);
            }
        });
    });
</script>
</head>

<body>
<div class="asds"><a href="pic/0db2c9cab10b690bf31fe72b.jpg"><img src="pic/0db2c9cab10b690bf31fe72b.jpg" /></a></div>
</body>
</html>

 

1、css控制方法

结合css和其支持的expression实现的，示例代码如下：

<title>控制图片的最大高宽</title>
<style type="text/css">
.clear{clear:both;}
.widthimg{width: expression(this.width > 200 ? '200px': true); max-width: 200px; }
</style>

<body>
<div class="clear">
<img class="widthimg" src="../image/mm.jpg" />
</div>
<div class="clear">
<img src="../image/xx7.jpg" />
</div>
</body>

 

2、JS方法：

<img src="yukiiak.jpg"  οnlοad="javascript:if(this.width>300)this.width=300">
 这句代码能把超过300宽度的图片变为300宽，  小于300的图片保持原尺寸不变。

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>限制图片尺寸的JS代码</title>
<script type="text/javascript">
function imgwh(){
    var img = document.getElementById("divheight");
    var imgkuandu=img.offsetHeight;
    var imgkuanduwidth=img.offsetWidth;
    if(imgkuandu>=500){
        document.getElementById("divheight").style.height="500px";
    }
    if(imgkuanduwidth>=600){
        document.getElementById("divheight").style.width="600px";
    }
}
</script>
</head>

<body>
<img src="01.jpg" οnlοad="imgwh();" id="divheight" /><br />
限制了图片尺寸<br />
<img src="01.jpg" /><br />
没有限制的尺寸
</body>
</html>
lampsunny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html图片的宽度和高度设置,CSS设置img图片的宽度和高度
weixin_39844267的博客
06-07 1万+
如何使用CSS控制HTML中图片高度宽度，统一对象内图片高度宽度等样式属性？我们在布局图片列表时，通常我们要控制img图片的高度和宽度这样来达到图片统一。如以下这个的图片列表布局示图图片img高度宽度需要设置的实际应用一、HTML标签内控制宽度高度Img标签教程：我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽html img图片标签高度宽度设置我们可以直接在图片标签设...
高度,javascript判断上传图片大小，宽度，高度
06-27
console.log('图片宽度:', img.width, '高度:', img.height); }; img.onerror = () => { alert('无法读取图片!'); }; img.src = e.target.result; }; reader.readAsDataURL(file); }); ``` 在这个示例中...
在img标签限制图片大小
weixin_35756892的博客
01-04 5437
要限制图片大小，你可以使用 HTML 的 img 标签的 width 和 height 属性。例如： <imgsrc="image.jpg" width="500" height="600"> 这样，图片的宽度就会被限制在 500 像素，高度被限制在 600 像素。 注意，如果你只设置了一个属性(例如只设置了 width)，图片的比例可能会改变。为了保持图片的原有比例，你应该同时设置...
CSS限定图片宽高在范围内等比缩放（img缺省宽高属性）
weixin_40269516的博客
10-30 5836
在标准浏览器中，我们可以通过 img{ max-width:400px; max-height:200px; } CSS样式控制图片，限定img图片在指定范围内等比缩放。该功能实现的前提是最终显示的img标签必须缺省 宽度 或 高度 属性（img图片没有宽高属性）。   img{ max-width: 400px; max-height:200px; }失效的原因：
巧用img的width和height属性进行缩图，使图片不变形
热门推荐
rj042的专栏
11-25 2万+
 做过web开发的哥们都会遇到要显示图片的情况。有时候在页面上因为布局的限制，所以需要限制图片显示的尺寸（即缩图显示）。 有如下几种情况：1：要求图片以某个宽度显示，比如150. 则可以这样指定这样可以保证图片显示的宽度为150，而高度也会以等比例显示，最终显示的图片也不会变形。 2：同理要求以某个高度显示，比如150，这同样可以这样指定这样可以保证图片显示的高度为15
html 表格单元格的宽度和高度的设置方法
09-22
在创建和设计表格时，调整单元格（td）的宽度和高度对于确保表格的美观和功能至关重要。以下将详细阐述HTML表格单元格的宽度和高度设置方法及其作用。 1. **表格（table）的width和height设置** - `width`属性在...
JS限制上传图片大小不使用控件在本地实现
10-27
ErrMsg += "\n图片宽度超过限制。请上传宽度小于" + AllowImgWidth + "px的文件，当前图片宽度为" + ImgWidth + "px"; } if (AllowImgHeight != 0 && AllowImgHeight ) { ErrMsg += "\n图片高度超过限制。请上传...
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
11-24
总结起来，要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”，我们需要结合使用`max-width`属性限制图片宽度，通过`text-align`和内联块级元素实现水平居中，以及利用`vertical-align`和负`margin`...
java图片上传、控制大小、宽度高度和图片裁剪并保存
01-26
大图片处理可能涉及内存限制，因此在处理大量或大尺寸图片时，可以考虑使用流式处理，避免一次性加载整个图片到内存。此外，还可以使用JPEG或PNG的压缩级别来减少存储空间。 8. **安全性考虑** 图片上传时，需要...
css 控制img大小
heqinghua217的博客
10-22 1万+
给你2个方法好了 第一个比较简单，就是把img的尺寸都设为100%，例如这样不管图片原始尺寸是多少，都会被限制在这个范围之内，不过这个方法有很大的局限性，必须要求图片的高宽比例与div的高宽比例一样，这样图片才不会变形 第二个方法那就是比较常用的，就是调用js来控制，给你一个链接，你自己看着弄吧 参考资料： http://www.lanrentuku.com/js/picture-634.
上传图片限制宽度和高度
LILEILEILOVE的博客
11-28 473
采用el-upload组件 onChange(file){ let imgName = file.name; if(imgName.includes("gif") || imgName.includes("jpg") || imgName.includes("png") || imgName.includes("jpeg") || ){ let size = file.size / 1024/1024/2; if(size >=3){ this.fileList = []; }else{ let im
img在IE6下用CSS限制最大高度、最大宽度
Akay的Web技术博客
03-23 2729
     在IE7、FF中限制最大高度和最大宽度很容易，只需要用max-height、max-width，但IE6下却不认min-*和max-*。那么该怎么解决img在IE6下用CSS限制最大高度、最大宽度呢？     方法一，用JS控制。这个确实可行，网上也有挺多的例子。不过我个人觉得麻烦。这里重点介绍第二种，用CSS控制。不过说实在的，这里也算是CSS+JS实现的。只是用到CSS中的exp
element上传图片，限制图片宽高
m0_52263688的博客
09-22 1415
上传图片的时候，如果需要显示图片的宽高可以下列代码实现 运用上传图片前 的事件，本代码实现的时候宽高为104px的才可以上传，可根据需要自行修改 beforeAvatarUpload(file: any) { // 文件大小限制为100k; const isLt = file.size / 1024 < 100; if (!isLt) { this.$message.error("超出文件限制大小"); } // 文件尺寸限制为104px*104p
图片上传限制尺寸大小
搬砖的孟达的博客
10-12 8321
http://blog.csdn.net/u014236259/article/details/52885591?locationNum=2&fps=1
css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）
_小郑有点困了的博客
05-27 2933
效果图： 宽>高就限制宽 即宽度100% ，高度自动。例如：19201088 高>宽就限制高 即高度100%，宽度自动。例如：19442592 很多时候图片宽高比不固定，而且作为一个前端，最好不要去写死图片的宽高。会给自己找麻烦。 html： <div class="boxs"> <div class="devices-box"> <div class="image-box"> <img src="./car.
cv2 限制图片高度 python
最新发布
05-24
可以使用OpenCV库中的resize函数来限制图片的高度。具体操作如下： 1. 首先导入OpenCV库： ``` import cv2 ``` 2. 读取图片： ``` img = cv2.imread('image.jpg') ``` 3. 获取图片的原始宽度和高度： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值