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的竟然在代码里面下毒