＜img src=“./logo.jpeg“ style=“width: 400px!important；“ alt=““＞修改图片的宽度

最新推荐文章于 2020-09-12 11:01:12 发布

Eva3288

最新推荐文章于 2020-09-12 11:01:12 发布

阅读量2.6k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Eva3288/article/details/108140003

版权

css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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 ？注意下面代码不可修改。

Eva3288

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜img src=“./logo.jpeg“ style=“width: 400px!important；“ alt=““＞修改图片的宽度

max-width:100px;给图片设置box-sizing: border-box;padding: 0 50px;，但图片左右会有50px的内边距利用缩放,给图片设置zoom: 0.625利用缩放,transform: scale(0.5,0.5)，但是占据的位置还是原来的200pxjs获取元素使用imgs[0].setAttribute(“style”,“width:300px!important;”)或者imgs[0].style.cssText=‘width:300px;’动画：谷歌.
复制链接

扫一扫

专栏目录