用JS简单地控制HTML中 img 标签 的 max-width 的办法

最新推荐文章于 2024-07-30 15:09:23 发布
最新推荐文章于 2024-07-30 15:09:23 发布
阅读量2.4k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rav009/article/details/8556278
版权

形如:

<img alt="资讯配图" src='<%= tid.url %>'  οnlοad="if(this.width>1024) this.width=1024"  />

加一个onload事件就好

爱知菜
关注
专栏目录
IE6支持max-width/height与min-width/height(完美解决方案)
09-25
IE6作为一款老旧的浏览器，对CSS的支持存在诸多限制，尤其是对于CSS3中的新特性，例如max-width和max-height等，都不被IE6原生支持。尽管如此，开发者们依然找到了一些方法来模拟这些功能，以确保网页在IE6中也能有...
利用JS解决ie6不支持max-width,max-height问题的方法
10-26
首先尝试使用jQuery库来获取元素的max-width值，但在IE6下无法正确获取，因此转向使用原生JavaScript。接下来给出了具体的原生JavaScript函数setPhotoSize，该函数接受三个参数：一个DOM元素，以及希望设置的最大...
js textarea min-width max-width min-height max-height
qq 117791303
12-31 464
固定textarea，宽高。 <textarea id="txtDataSource" style="min-width: 100px; max-width: 100px; min-height: 178px; max-height: 178px;"></textarea> 这样就拖不动下面的小箭头了。
html img动态设置图片大小,Js动态设置Img大小
weixin_33821888的博客
06-04 2615
function ResizePic() {$(‘img‘).each(function () {var maxWidth = 450; // 图片最大宽度var maxHeight = 750; // 图片最大高度var ratio = 0; // 缩放比例var width = $(this).width(); // 图片实际宽度var height = $(this).heig...
【CSS】给图片设置 max-width
最新发布
工作中遇到问题记录
07-30 177
【CSS】给图片设置 max-width
JavaScript解决e6不支持不支持max-width,max-height的问题的方法
前端岚枫
09-10 1154
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题，刚开始用jQuery方法来实现，不过一直获取不到css里面的值，如   if($.browser.msie && $.browser.version == 6.0)   {     var maxWidth = parseInt($('.viewBigPic img').css('max-width')
js 图片加载时 按比例设置图片宽高_JS控制图片按比例缩放并不超过一定宽度和高度...
weixin_39610468的博客
12-22 534
1.如何使用，html页面代码(此处定义一个图片图片按照(宽170px或者高120px缩放)) 2.js通用方法//JS控制图片按比例缩放并不超过一定宽度和高度//图片按比例缩放function DrawImage(ImgD, iwidth, iheight) {var flag = false;var image = new Image();//var iwidth = 620; ...
C#正则提取Html中图片的宽和高|regex get image width and height
weixin_30526593的博客
01-24 112
在HTML代码中，img的写法大致如下： <img src=”…” alt=”…” width=”…” height=”…” /> 我们利用正则表达式来提取 width 和 height 的值： string str = "<img src=\"/upload/1.jpg\" width=\"100\" height=\"80\">"; str...
让IE6支持兼容min-width、max-width CSS样式属性的方法
09-24
在CSS布局设计中，`min-width` 和 `max-width` 是两个非常重要的样式属性，它们允许我们设置元素的最小和最大宽度，以确保在不同屏幕尺寸和设备上保持良好的响应性和可读性。然而，IE6（Internet Explorer 6）浏览器...
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
10-27
在网页设计中，保持图片等比例缩放是一个重要的需求，以确保图像在不同尺寸的屏幕或浏览器中看起来依然保持原始的比例。然而，IE6（Internet Explorer 6）浏览器对CSS属性`max-width`和`max-height`的支持并不完善，...
img max-width:100% IE不起作用
Red_Liu
04-08 1871
场景： <div> css设置属性为：display:table； <img> css 设置属性为：max-width:100%； max-width:100% 在IE11,IE10 下失效； 解决方法： 针对IE的特性进行书写，注意先后顺序： display: table; display:block\0; ...
css按钮居中_Web 技术：CSS最小和最大(宽度/高度)知识点及优缺点
weixin_39979245的博客
11-21 288
通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。width 属性首先要讨论的是与宽度相关的属性。我们有min...
js中的字符串替换replace操作
爬楼梯的前端小白的博客
01-20 1万+
js中的替换replace
css简易的进度条
qq_45723045的博客
10-22 845
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
max-width: 100%和width:100%的区别
qq_920189602的博客
10-13 2218
比如我们要设置一个图片 img { max-width: 100%;}，img { width: 100%;}， max-width：就是要保证图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。此时，如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小，图片会缩放占满最大可用空间。 width:100%：要实现图片的自动缩放，也可以使用更通用的 width 属性。然而，这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。 ...
img 图片自动适应div的方法
热门推荐
qq_31404277的博客
12-08 1万+
我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 1.简单的做法 &lt;div&gt; &lt;img src="1.jpg" alt=""&gt; &lt;/div&gt; 备注一下这里的图片大小为200x200px div { width: 400px; height: 400px; b...
前端使用printJS插件 执行浏览器打印
全易
12-06 1556
一个很小的javascript库，帮助从网络打印。
img { max-width: 100%; max-height: 100%; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; }
06-12
其中，img标签的max-width和max-height属性设置为100%表示图片最大宽度和高度为其父元素的宽度和高度，即图片会自适应大小。overlay类的样式设置了一个黑色半透明的背景层，并将其设置为fixed定位，覆盖在页面上。当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱知菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值