JS前端大佬帮我看看这个
本帖最后由 zoenbo 于 2021-3-19 14:38 编辑<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
比如2.jpg，3jpg，4.jpg实际尺寸是40*40px，1.jpg实际尺寸是500*500px
实际尺寸为40*40px的让它缩放成20*20px
实际尺寸为500*500px的让它缩放成600*600px
备注：原网页里并未定义这些图的width和height
这用CSS或者JS怎么实现呢？ 如果原网页的img标签没有id,class元素元素
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
css代码如下
img:nth-child(1){
width:600px;
height:600px;
}
img:nth-child(n + 2){
width:20px;
height:20px;
}
效果图
如果原网页的img标签带有id,class元素，如
<img id="aa" class="aa" src="1.jpg">
<img id="aa" class="aa"src="2.jpg">
<img id="aa" class="aa"src="3.jpg">
<img id="aa" class="aa"src="4.jpg">
css代码如下
#aa:nth-child(1){
width:600px;
height:600px;
}
#aa:nth-child(n + 2){
width:20px;
height:20px;
}
效果图
你是想这样？
$('img').each(function () {
let width = $(this).width();
if (width == 40) {
$(this).css({ width: '20px', height: '20px' })
} else if (width == 500) {
$(this).css({ width: '600px', height: '600px' })
}
})
本帖最后由 lcbreak 于 2021-3-19 13:09 编辑
<img src="./40.jpg" alt="">
<img src="./40.jpg" alt="">
<img src="./500.jpg" alt="">
<img src="./40.jpg" alt="">
<img src="./40.jpg" alt="">
<img src="./500.jpg" alt="">
<img src="./500.jpg" alt="">
<img src="./40.jpg" alt="">
const imgs = document.getElementsByTagName('img');
for (const item of imgs) {
if (item.naturalWidth == 40) {
item.style.width = 20 + 'px';
} else if (item.naturalWidth == 500) {
item.style.width = 600 + 'px';
}
}
这样你看看，获取网页上所有的img，然后遍历一遍，根据图片尺寸进行修改宽度 感觉你是想做批量实现，大概就是先获取图片的高度或宽度，等于40的时候给 img 添加style 宽高度为20；等于500的时候添加宽高度为600
如果不是，直接写css就行了 这需要看你想缩放成实际尺寸，还是显示的尺寸。显示的尺寸直接设定像素值就行，如果是实际的尺寸你需要先获取图片的实际尺寸，然后写入canvas，更改图片的尺寸。 外面包一个div 固定大小 然后你图片的属性是 max-height 100% max-width 100%就可以了啊 fmamcn 发表于 2021-3-19 12:21
感觉你是想做批量实现，大概就是先获取图片的高度或宽度，等于40的时候给 img 添加style 宽高度为20；等于5 ...
是的，就是这意思。 Takitooru 发表于 2021-3-19 12:22
如果原网页的img标签没有id,class元素元素
大佬就是厉害~~如果实际网页中比如40*40这个尺寸的图片会被复用N多次，而且是长篇幅中的图片，没法判断是第几张出现的情况下咋写呢？ PrincessSnow 发表于 2021-3-19 12:25
外面包一个div 固定大小 然后你图片的属性是 max-height 100% max-width 100%就可以了啊
这好操作，现在就是想解决一下在没有定义任何ID,IMG,CLASS之类的情况下，不知道咋弄。 zoenbo 发表于 2021-3-19 12:33
大佬就是厉害~~如果实际网页中比如40*40这个尺寸的图片会被复用N多次，而且是长篇幅中的图片，没法判断是 ...
代码不变
:nth-child(n + 2)解释就是选择大于1的，也就是除了第一个600px外，后面有多少40px都同意设置成20px
效果图
coder55k 发表于 2021-3-19 12:39
直接加个类，设置宽和高
实际页面篇幅巨大，手动耗时费力{:1_889:}