第 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'