max-width:100px;- 给图片设置
box-sizing: border-box;padding: 0 50px;，但图片左右会有50px的内边距 - 利用缩放,给图片设置
zoom: 0.625 - 利用缩放,
transform: scale(0.5,0.5)，但是占据的位置还是原来的200px - js获取元素使用imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’
- 动画：谷歌无效！给图片设置动画，from{width:300px;}to{width:300px;}，动画时间为0s，原理是CSS动画的样式优先级高于!important的特性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.img1{/* 方法1:max-width */max-width:100px; }.img2{/* 方法2:利用ie盒模型 width = border + padding + content */box-sizing:border-box;padding:0 50px; /*宽度固定 + padding后 内容就会减小*/}/* 利用缩放 */.img3{zoom:.5;}.img4{transform: scale(.5);}/* 谷歌测试无效！利用CSS动画的样式优先级高于!important的特性 */.img5{animation: changeWidth 0s forwards;} @keyframes changeWidth {from {width:200px;}to {width:100px;}} </style>
</head>
<body><div> max-width:100px;</div> <img class="img1" src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598576396&t=e4b12ad822ebc688b7cf75965acc852b"alt="" style="width:200px!important;"><p></p><div> box-sizing:border-box; padding:0 50px; -- 方法2:利用ie盒模型 width = border + padding + content </div> <img class="img2" src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598576396&t=e4b12ad822ebc688b7cf75965acc852b"alt="" style="width:200px!important;"><p></p><div>zoom:.5; -- 利用缩放 </div> <img class="img3" src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598576396&t=e4b12ad822ebc688b7cf75965acc852b"alt="" style="width:200px!important;"><p></p><div>transform: scale(.5); -- 利用缩放</div> <img class="img4" src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598576396&t=e4b12ad822ebc688b7cf75965acc852b"alt="" style="width:200px!important;"><div>animation 动画：--谷歌测试无效！利用CSS动画的样式优先级高于!important的特性 </div> <img class="img5" src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598576396&t=e4b12ad822ebc688b7cf75965acc852b"alt="" style="width:200px!important;">
</body>
</html>
参考：
你TMD的竟然在代码里面下毒
第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。
