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

Question

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

important 算是比较高的优先级，那在这个基础之上，在添加一些标签，应该就能覆盖样式了吧！

Answer 1

一、

zoom: 0.625 
// 300 / 480 = 0.625

二、

transform: scale(0.625)

Answer 2

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

Answer 3

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

Answer 4

max-width可以覆盖掉!important

Answer 5

max-width: 300px;

Answer 6

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

Answer 7

用max-width去覆盖挺好的。

Answer 8

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

    }

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

Answer 9

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

Answer 10

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

Answer 11

max-width:300px;
最简单哒

Answer 12

来个奇淫技巧

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

Answer 13

来个奇淫技巧

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的特性

Answer 14

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

Answer 15

box-sizing: border-box

Answer 16

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

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

Answer 17

总结一下
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的特性

Answer 18

来个奇淫技巧

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

Chrome可以，Firefox不支持

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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

Answer 25

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

利用css优先级叠加原理

Answer 26

来个奇淫技巧

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

Chrome可以，Firefox不支持

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

Answer 27

总结一下
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

Answer 28

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

Answer 29

总结一下
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浏览器没有生效。

Answer 30

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

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

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

Demo

Answer 31

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

Answer 32

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

Answer 33

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

Answer 34

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

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

Answer 35

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

Answer 36

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

Answer 37

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

这种也可以

Answer 38

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

Answer 39

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