CSS【详解】图片相关样式（含object-fit ，object-position，lip-path，filter）

精选原创

朝阳39 2024-09-14 15:29:41 博主文章分类：CSS ©著作权

文章标签 css 宽高默认值缩放 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任

img 渲染图片，可以理解为一张镂空的白纸，通过镂空区域看到白纸下的图片。

CSS【详解】图片相关样式（含object-fit ，object-position，lip-path，filter）_默认值

图片尺寸

即镂空区域的大小

若未指定，则按图片原始尺寸显示；
若指定，则默认按指定尺寸显示（若指定尺寸的宽高比与原始的宽高比不同，则会拉伸为指定尺寸），通过 object-fit 样式，可以修改宽高比不同时的图标表现。

宽度 width
高度 height

图片的展示方式 object-fit

即图片在镂空区域中的呈现方式，是否缩放，是否改变自身宽高比等。

值	描述
fill	默认值。调整替换内容的大小来填充元素的内容框。如有必要，对象将被拉伸或挤压。
contain	缩放被替换的内容以保持其宽高比，同时适合元素的内容框。
cover	调整被替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪。
none	替换的内容不会调整大小。
scale-down	内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

缩略图使用 cover
列表图使用contain
全屏大图预览使用 scale-down

CSS【详解】图片相关样式（含object-fit ，object-position，lip-path，filter）_默认值_02

<div class="m-4 text-align-center inline-block">
    <img src="/EC_Logo.jpg" style="background-color: black; height: 80px; width: 160px" />
    <label>默认 object-fit: fill</label>
  </div>

  <div class="m-4 text-align-center inline-block">
    <img
      src="/EC_Logo.jpg"
      style="object-fit: cover; background-color: black; height: 80px; width: 160px"
    />
    <label>object-fit: cover</label>
  </div>

  <div class="m-4 text-align-center inline-block">
    <img
      src="/EC_Logo.jpg"
      style="object-fit: contain; background-color: black; height: 80px; width: 160px"
    />
    <label>object-fit: contain</label>
  </div>

  <div class="m-4 text-align-center inline-block">
    <img
      src="/EC_Logo.jpg"
      style="object-fit: none; background-color: black; height: 80px; width: 160px"
    />
    <label>object-fit: none</label>
  </div>

  <hr />
  <div class="m-4 inline-block">
    <div class="flex flex-col justify-center items-center">
      <div>
        <img
          src="/EC_Logo.jpg"
          style="object-fit: scale-down; background-color: black; height: 80px; width: 160px"
        />
      </div>
      <div>
        <label>object-fit: scale-down(width 较大)</label>
      </div>
    </div>
  </div>

  <div class="m-4 inline-block">
    <div class="flex flex-col justify-center items-center">
      <div>
        <img
          src="/EC_Logo.jpg"
          style="object-fit: scale-down; background-color: black; height: 160px; width: 80px"
        />
      </div>
      <div>
        <label>object-fit: scale-down(height 较大)</label>
      </div>
    </div>
  </div>