第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

[zeroone001]

<img src="1.jpg" style="width:480px!important;”>

[YouziXR]

max-width: 300px
不知道这样可不可以，大佬们请赐教

[frontEndJC]

max-width: 300px
transform: scale(0.625,0.625)
暂时只想到这两种

[TGuoW]

box-sizing: border-box;
padding: 0 90px;

这种也可以

[TGuoW]

比较硬核的是再加个
width: 300px !important;
把题目里的覆盖掉

[Mikerui]

padding:0 90px; box-sizing: border-box; max-width：300px

[leemotive]

来个有点局限的， 只适用于图片原始尺寸小于300的才行

<div style="display: flex;width:300px;height: 300px">
  <img src="./down.png" style="width:480px !important" />
</div>

[y1324]

获取当前dom元素，更改css样式。css属性按楼上发的改都可以。
在图片外层加一个div。样式写成 div img{background-size:100%}，也可以

[zhuzhh]

一、

zoom: 0.625 
// 300 / 480 = 0.625

二、

transform: scale(0.625)

[xbcc123]

1. <img src="1.jpg" style="width:480px!important; max-width = 300px">
2. <img src="1.jpg" style="width:480px!important; transform: scale(300/480)">

[lzcdev]

1. <img src="1.jpg" style="width:480px!important; max-width: 300px">
2. <img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" >
3. <img src="1.jpg" style="width:480px!important; width:300px!important;">

[moziming888]

max-width可以覆盖掉!important

[nobitas]

max-width: 300px;

[zxcweb]

总结一下吧：
1.css方法
max-width:300px;覆盖其样式；
transform: scale(0.625)；按比例缩放图片；
2.js方法
document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

[fireairforce]

用max-width去覆盖挺好的。

[RuifangLong]

总结：
img{
/* max-width:300px /
/ transform: scale(0.625); /
/ box-sizing:border-box;
padding:90px; /
/ zoom:0.625; /
/ width:300px!important; 不可以 */

    }

除了最后的一行不可以，因为内联样式的优先级比内部样式优先级高

[nanfs]

1 max-width:300
2 transform:scale(0.625)
3 zoom:0625
4 ...
1\2\3 就已经足够了

[yzajoee]

1.使important样式不生效，display: inline，position: absolute，left...right...,或者max-width:300px;
2.利用盒模型的padding，box-sizing: content-box; padding-left:90px; padding-right: 90px;
3.缩放

[zhdanny]

max-width:300px;
最简单哒

[young122849]

来个奇淫技巧

img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}

[young122849]

来个奇淫技巧

img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}

来个奇淫技巧

img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}

利用CSS动画的样式优先级高于!important的特性

[catbea]

很简单啊
img{
max-width:300px;
}

[Rotten-Egg]

box-sizing: border-box

[CC712]

document.querySelector('img').style.cssText='width:300px;'

为什么都没有用js的。。。

[Shiryan]

总结一下
1、给图片设置max-width:300px
2、给图片设置transform: scale(0.625,0.625)，但是占据的位置还是原来的480px
3、给图片设置box-sizing: border-box;padding: 0 90px;，但图片左右会有90px的内边距
4、给图片设置zoom: 0.625
5、js获取元素使用imgs[0].setAttribute("style","width:300px!important;")或者imgs[0].style.cssText='width:300px;'
6、给图片设置动画，from{width:300px;}to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于!important的特性

[lzwdot]

来个奇淫技巧

img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}

Chrome可以，Firefox不支持

[wugengliuli-web]

外面套个盒子 然后overflow： hidden？

[zhengwengang]

同时设置max-width和min-width为300px即可

[yygmind]

<img src="1.jpg" style="width:480px!important;”>

[mask2012]

我只知道如果实际项目中如果发生了这种事，好的解决办法是把行内style改成class写法
本来行内style就已经够愚蠢了，现在你让我蠢上加蠢，我做不到

[litokele2018]

let img = document.getElementsByTagName('img')[0]
img.style.width = 300 + 'px'

[CodeDreamfy]

父元素width: 300px; overflow:hidden; 可以吗哈哈

[shuch]

<style>
  img {
    width: 300px !important;
  }
</style>

利用css优先级叠加原理

[alanhe421]

来个奇淫技巧

img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}

Chrome可以，Firefox不支持

额 我测试了下 Chrome不可以。84.0.4147.105

[flygo996]

总结一下
1、给图片设置max-width:300px
2、给图片设置transform: scale(0.625,0.625)，但是占据的位置还是原来的480px
3、给图片设置box-sizing: border-box;padding: 0 90px;，但图片左右会有90px的内边距
4、给图片设置zoom: 0.625
5、js获取元素使用imgs[0].setAttribute("style","width:300px!important;")或者imgs[0].style.cssText='width:300px;'
6、给图片设置动画，from{width:300px;}to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于!important的特性

good

[ysyfff]

document.querySelector('img').style.width = '300px'

[DAHU123]

总结一下
1、给图片设置max-width:300px
2、给图片设置transform: scale(0.625,0.625)，但是占据的位置还是原来的480px
3、给图片设置box-sizing: border-box;padding: 0 90px;，但图片左右会有90px的内边距
4、给图片设置zoom: 0.625
5、js获取元素使用imgs[0].setAttribute("style","width:300px!important;")或者imgs[0].style.cssText='width:300px;'
6、给图片设置动画，from{width:300px;}to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于!important的特性

4、给图片设置zoom: 0.625，这个我在vue的scss文件中写的，在Chrome浏览器没有生效。

[FujianLuan]

补充一个：利用clip或clip-path进行裁剪。

img{
  /* position:absolute;
  clip: rect(0px 300px 200px 0px) */

  clip-path: inset(0 180px 0px 0px);
}

Demo

[shifengdiy]

1. 使用max-width优先级高于width特性
2. 使用transform的scale
3. 使用js拿到element后操作

[xiangfei1]

   img {
      box-sizing: border-box;
      padding-left: 180px;
    }

[xuxin666666]

来点奇葩的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img[style="width:480px!important;"] {
            display: none;
        }
    </style>
</head>

<body>
    <img src="1.jpg" style="width:480px!important;">
    <img src="1.jpg" style="width:300px">
</body>
</html>