图片保持比例自适应大小；图片保持比例自动充满父元素；图片保持比例充满盒子

最新推荐文章于 2022-11-15 11:20:49 发布

i_am_a_div_日积月累_

最新推荐文章于 2022-11-15 11:20:49 发布

阅读量1.4k

点赞数 1

分类专栏： css 文章标签：图片保持比例自适应大小图片保持比例充满盒子图片保持比例自动充满父元素 object-fit

本文链接：https://blog.csdn.net/i_am_a_div/article/details/126975130

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

需求：经常会有一个div盒子，里面放入一个img图片。需要是图片保持比例，缩放充满div盒子。

思路： 1.必须给父元素设置固定的宽高。2.给img设置 object-fit: scale-down; 属性

object-fit使用学习
先看效果：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    .img_box {
      display: inline-block;
      border: 5px solid cyan;
      width: 200px;
      height: 300px;
      margin: 20px;
    }

    h4 {
      float: left;
    }

    .fill {
      object-fit: fill;
    }

    .contain {
      object-fit: contain;
    }

    .cover {
      object-fit: cover;
    }

    .scale-down {
      object-fit: scale-down;
    }

    .none {
      object-fit: none;
    }

  </style>
</head>

<body>

  <h1>object-fit 属性</h1>

  <img src="../../static/bgcimg.jpeg" alt="Paris">
  <h4>不使用 object-fit:</h4>
  <br>

  <p style="margin-top:30px;">注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。</p>

  <div class="img_box">
    <img class="fill" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px">
    <h4>object-fit: fill (默认):默认，不保证保持原有的比例，内容拉伸填充整个内容容器</h4>
  </div>




  <div class="img_box">
    <img class="contain" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px">
    <h4>object-fit: contain:保持原有尺寸比例。内容被缩放。</h4>
  </div>

  <div class="img_box">
    <img class="cover" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px">
    <h4>object-fit: cover:保持原有尺寸比例。但部分内容可能被剪切。</h4>
  </div>

  <div class="img_box">
    <img class="scale-down" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px">
    <h4>object-fit: scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。</h4>
  </div>

  <div class="img_box">
    <img class="none" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px">
    <h4>object-fit: none:保留原有元素内容的长度和宽度，也就是说内容不会被重置。</h4>
  </div>



</body>

</html>