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

zeroone001 · 2019-04-22T23:30:19Z

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

YouziXR · 2019-04-23T00:36:54Z

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

frontEndJC · 2019-04-23T00:52:59Z

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

TGuoW · 2019-04-23T01:08:38Z

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

这种也可以

TGuoW · 2019-04-23T01:11:23Z

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

Mikerui · 2019-04-23T01:31:57Z

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

leemotive · 2019-04-23T01:46:57Z

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

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

y1324 · 2019-04-23T01:50:07Z

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

zhuzhh · 2019-04-23T01:56:01Z

一、

zoom: 0.625 
// 300 / 480 = 0.625

二、

transform: scale(0.625)

xbcc123 · 2019-04-23T02:09:42Z

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 · 2019-04-23T02:13:33Z

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

moziming888 · 2019-04-23T02:45:07Z

max-width可以覆盖掉!important

nobitas · 2019-04-23T05:45:31Z

max-width: 300px;

zxcweb · 2019-04-23T13:35:42Z

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

fireairforce · 2019-04-25T01:58:40Z

用max-width去覆盖挺好的。

RuifangLong · 2019-04-25T14:18:46Z

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

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

nanfs · 2019-05-05T09:04:13Z

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

yzajoee · 2019-05-19T17:39:19Z

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 · 2019-07-11T08:04:05Z

max-width:300px;
最简单哒

young122849 · 2019-07-13T14:32:52Z

来个奇淫技巧

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

young122849 · 2019-07-13T14:33:40Z

来个奇淫技巧

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 · 2019-08-14T02:54:27Z

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

Rotten-Egg · 2019-08-18T03:06:40Z

box-sizing: border-box

CC712 · 2019-08-28T07:53:20Z

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

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

Shiryan · 2019-09-17T04:28:32Z

总结一下
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 · 2019-09-29T07:09:37Z

来个奇淫技巧

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

Chrome可以，Firefox不支持

wugengliuli-web · 2019-10-14T07:30:06Z

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

zhengwengang · 2019-11-14T07:57:38Z

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

yygmind · 2019-12-16T03:02:42Z

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

mask2012 · 2020-01-20T02:04:46Z

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

litokele2018 · 2020-03-23T11:36:49Z

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

CodeDreamfy · 2020-06-11T07:33:54Z

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

shuch · 2020-07-21T00:44:15Z

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

利用css优先级叠加原理

alanhg · 2020-08-01T07:35:07Z

来个奇淫技巧
img {
      animation: test 0s forwards;
}
@keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}
Chrome可以，Firefox不支持

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

flygo996 · 2020-08-24T08:30:34Z

总结一下
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 · 2020-12-28T02:56:01Z

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

DAHU123 · 2021-01-26T08:39:16Z

总结一下
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 · 2021-07-22T07:02:03Z

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

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

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

Demo

shifengdiy · 2021-07-25T09:32:12Z

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

xiangfei1 · 2021-10-14T03:07:53Z

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

xuxin666666 · 2022-10-23T14:38:51Z

来点奇葩的

<!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>

yygmind mentioned this issue Jul 14, 2019

前端 100 问：能搞懂80%的请把简历给我 yygmind/blog#43

Open

yygmind added the CSS世界 label Dec 16, 2019

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

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

Comments

zeroone001 commented Apr 22, 2019

YouziXR commented Apr 23, 2019 • edited

frontEndJC commented Apr 23, 2019

TGuoW commented Apr 23, 2019 • edited

TGuoW commented Apr 23, 2019 • edited

Mikerui commented Apr 23, 2019

leemotive commented Apr 23, 2019

y1324 commented Apr 23, 2019

zhuzhh commented Apr 23, 2019

xbcc123 commented Apr 23, 2019 • edited

lzcdev commented Apr 23, 2019

moziming888 commented Apr 23, 2019

nobitas commented Apr 23, 2019

zxcweb commented Apr 23, 2019

fireairforce commented Apr 25, 2019

RuifangLong commented Apr 25, 2019

nanfs commented May 5, 2019

yzajoee commented May 19, 2019

zhdanny commented Jul 11, 2019

young122849 commented Jul 13, 2019

young122849 commented Jul 13, 2019

catbea commented Aug 14, 2019

Rotten-Egg commented Aug 18, 2019

CC712 commented Aug 28, 2019

Shiryan commented Sep 17, 2019

lzwdot commented Sep 29, 2019

wugengliuli-web commented Oct 14, 2019

zhengwengang commented Nov 14, 2019

yygmind commented Dec 16, 2019

mask2012 commented Jan 20, 2020

litokele2018 commented Mar 23, 2020

CodeDreamfy commented Jun 11, 2020

shuch commented Jul 21, 2020 • edited

alanhg commented Aug 1, 2020

flygo996 commented Aug 24, 2020

ysyfff commented Dec 28, 2020

DAHU123 commented Jan 26, 2021 • edited

FujianLuan commented Jul 22, 2021 • edited

shifengdiy commented Jul 25, 2021

xiangfei1 commented Oct 14, 2021

xuxin666666 commented Oct 23, 2022

YouziXR commented Apr 23, 2019 •

edited

TGuoW commented Apr 23, 2019 •

edited

TGuoW commented Apr 23, 2019 •

edited

xbcc123 commented Apr 23, 2019 •

edited

shuch commented Jul 21, 2020 •

edited

DAHU123 commented Jan 26, 2021 •

edited

FujianLuan commented Jul 22, 2021 •

edited