html img 图片缩放

原文链接: html img 图片缩放

上一篇: Python3 使用PIL将图片切分为九宫格

下一篇: vue 网格 过渡 动画

图片依然使用这个mix2s....

如果不设置img宽高，默认为图片宽高，可能会会超出父元素

    <div style="width: 100px;height: 200px;">
      <img src="../assets/mix2s.png">
    </div>

设置宽高后会拉伸填充

    <img src="../assets/mix2s.png" style="width: 100px;height: 200px;">
    <img src="../assets/mix2s.png" style="width: 100px;height: 100px;">
    <img src="../assets/mix2s.png" style="width: 100px;height: 300px;">
    <img src="../assets/mix2s.png" style="width: 400px;height: 200px;">

缩放

设置宽高都为100%,是填充效果，大小为父元素大小

    <div style="width: 300px;height: 300px;border: 1px solid black">
      <img src="../assets/mix2s.png" style="height: 100%;width: 100%;">
    </div>

只设置一个长度，则按照等比例拉伸

高度100%，则高度与父元素一致，等比例拉伸宽度

    <div style="width: 300px;height: 300px;border: 1px solid black">
      <img src="../assets/mix2s.png" style="height: 100%">
    </div>

拉伸溢出，等比例拉伸后可能超出父容器的大小，影响布局，所以在使用等比例拉伸时，要根据图片的形状和需求选择先确定哪个长度

    <div style="width: 300px;height: 300px;border: 1px solid black">
      <img src="../assets/mix2s.png" style="width: 100%">
    </div>