JS前端大佬帮我看看这个

zoenbo

<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怎么实现呢？

Takitooru

如果原网页的img标签没有id,class元素元素
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
css代码如下

[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代码如下

[CSS] 纯文本查看 复制代码

#aa:nth-child(1){
width:600px;
height:600px;
}
#aa:nth-child(n + 2){
width:20px;
height:20px;
}

效果图

waf642311

你是想这样？

[JavaScript] 纯文本查看 复制代码

$('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

[HTML] 纯文本查看 复制代码

    <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="">
    

[JavaScript] 纯文本查看 复制代码

        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，然后遍历一遍，根据图片尺寸进行修改宽度

fmamcn

感觉你是想做批量实现，大概就是先获取图片的高度或宽度，等于40的时候给 img 添加style 宽高度为20；等于500的时候添加宽高度为600
如果不是，直接写css就行了

Mr-zhu

这需要看你想缩放成实际尺寸，还是显示的尺寸。显示的尺寸直接设定像素值就行，如果是实际的尺寸你需要先获取图片的实际尺寸，然后写入canvas，更改图片的尺寸。

PrincessSnow

外面包一个div 固定大小 然后你图片的属性是 max-height 100% max-width 100%就可以了啊

zoenbo

fmamcn 发表于 2021-3-19 12:21
感觉你是想做批量实现，大概就是先获取图片的高度或宽度，等于40的时候给 img 添加style 宽高度为20；等于5 ...

是的，就是这意思。

zoenbo

Takitooru 发表于 2021-3-19 12:22
如果原网页的img标签没有id,class元素元素

大佬就是厉害~~如果实际网页中比如40*40这个尺寸的图片会被复用N多次，而且是长篇幅中的图片，没法判断是第几张出现的情况下咋写呢？

zoenbo

PrincessSnow 发表于 2021-3-19 12:25
外面包一个div 固定大小 然后你图片的属性是 max-height 100% max-width 100%就可以了啊

这好操作，现在就是想解决一下在没有定义任何ID,IMG,CLASS之类的情况下，不知道咋弄。

Takitooru

zoenbo 发表于 2021-3-19 12:33
大佬就是厉害~~如果实际网页中比如40*40这个尺寸的图片会被复用N多次，而且是长篇幅中的图片，没法判断是 ...

代码不变
:nth-child(n + 2)解释就是选择大于1的，也就是除了第一个600px外，后面有多少40px都同意设置成20px

效果图

zoenbo

coder55k 发表于 2021-3-19 12:39
直接加个类，设置宽和高

实际页面篇幅巨大，手动耗时费力