codr.top
codr.top

CSS缩放图片问题

相对容器等比缩放

平时最常见的情况，简单的说就是图片按照父级宽度高度设置比例。

demo代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <style>
      .container {
        width: 300px;
        height: 300px;
      }

      .demo {
        /* 等比例缩放只需要设置width或者height */
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img class="demo"
           src="https://cn.vuejs.org/images/logo.png"
           alt="" />
    </div>
  </body>
</html>

demo展示

1ED98ED57AAA4541891DC0313882423A.png

相对自身等比缩放

这是最近我遇到的一个需求，需要按照图片实际宽高缩放，最快捷的办法是使用css的zoom属性。查下文档，Firefox不支持。再看看自己的浏览器此处应有一个阴险的笑容

image.png

demo代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <style>
      .container {
        width: 300px;
        height: 300px;
      }

      .demo {
        zoom: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img class="demo"
           src="https://cn.vuejs.org/images/logo.png"
           alt="" />
    </div>
  </body>
</html>

demo展示

image.png

评论区

  1. [微笑]
  2. [嘻嘻]
  3. [哈哈]
  4. [可爱]
  5. [可怜]
  6. [挖鼻]
  7. [吃惊]
  8. [害羞]
  9. [挤眼]
  10. [闭嘴]
  11. [鄙视]
  12. [爱你]
  13. [泪]
  14. [偷笑]
  15. [亲亲]
  16. [生病]
  17. [太开心]
  18. [白眼]
  19. [右哼哼]
  20. [左哼哼]
  21. [嘘]
  22. [衰]
  23. [委屈]
  24. [吐]
  25. [哈欠]
  26. [抱抱]
  27. [怒]
  28. [疑问]
  29. [馋嘴]
  30. [拜拜]
  31. [思考]
  32. [汗]
  33. [困]
  34. [睡]
  35. [钱]
  36. [失望]
  37. [酷]
  38. [色]
  39. [哼]
  40. [鼓掌]
  41. [晕]
  42. [悲伤]
  43. [抓狂]
  44. [黑线]
  45. [阴险]
  46. [怒骂]
  47. [互粉]
  48. [心]
  49. [伤心]
  50. [猪头]
  51. [熊猫]
  52. [兔子]
  53. [ok]
  54. [耶]
  55. [good]
  56. [NO]
  57. [赞]
  58. [来]
  59. [弱]
  60. [草泥马]
  61. [神马]
  62. [囧]
  63. [浮云]
  64. [给力]
  65. [围观]
  66. [威武]
  67. [奥特曼]
  68. [礼物]
  69. [钟]
  70. [话筒]
  71. [蜡烛]
  72. [蛋糕]
0

历史记录

没有更多了