CSS中的图像大小

图像由img元素src指定：

<img src="./xi_map.jpg" alt="" />
<img src="./xi_map.jpg" alt="" width="100" height="100" />
 <img src="./xi_map.jpg" alt="" width="100" />
 <img src="./xi_map.jpg" alt="" height="100" />

图像元素尺寸 ：690 X 586，显示的尺寸依次：

1. 690px, 586px
2. 100px, 100px
3. 100px, 586/(690/100) = 84.92px
4. 100*(690/586) = 117.74px, 100px

图像由backgroud-image指定:

    <span class="img" style="width:690px;height:586px"></span>
    <span class="img" style="width:100px;height:100px"></span>
    <span
      class="img"
      style="width:100px;height:100px; background-size: 50px 50px"
    ></span>
    <span
      class="img"
      style="width:100px;height:100px; background-size: contain"
    ></span>
    <span
      class="img"
      style="width:100px;height:100px; background-size: cover"
    ></span>
    <span
      class="img"
      style="width:100px;height:117.74px; background-size: cover"
    ></span>
<style>
  .img {
    background-color: rgb(156, 54, 54);
    display: inline-block;
    background-image: url('./xi_map.jpg');
    background-repeat: no-repeat;
    background-size: auto;
  }
</style>

图像显示尺寸依次:

1. 690px, 586px
2. 100px, 100px (只显示图像左上角 100px X 100px 大小的部分)
3. 50px, 50px
4. 100px, 84.92px (图像按比例缩放显示)
5. 100px, 100px (图像高度上按缩放显示，但宽度上只截取了 100px 显示（按原图像宽高比计算的话，宽度应该显示 117.74px）)
6. 117.74px, 100px (图像按原图像的固定宽高比显示)

总结

• 固有尺寸：固有宽度，固有高度，固有宽高比
• 指定大小： height,width,background-size
• 图像超出 背景区域的部分，会被裁剪掉；覆盖不全的部分，会用背景色来填充
• 调整图像大小:
  • background-image方式 ，用background-size属性，指定大小(宽，高)，cover，contain
    • contain是包含约束，要在背景框里尽可能的大。如上图 4，背景框宽 100px,高 100px，图像固有宽 690px,高 586px,包含约束取宽 100px，高度根据宽高比计算出来 100/690/586=84.92px,对于背景区域未覆盖的地方用背景色来填充。
    • cover是覆盖约束，要在大于等于背景框的前提下尽可能的小；如上图 5，背景框宽 100px，高 100px，图像固有宽 690px，高 586px，覆盖约束要取高 100px，宽根据固有宽高比计算 100*（690/586）=117.74px，对于超出背景区域的部分，被裁剪掉。
  • <img>方式，使用object-fit属性，fill, contain, cover,none,scale-down
    • fill：填充，拉伸填充满屏幕,不保证原有比例 -contain: 包含，保持原有尺寸比例，且图像容器里放的下
    • cover: 覆盖，保持原有尺寸比例，且图像尺寸一定大于等于容器尺寸
    • none: 保持原有尺寸比例，如果图像尺寸大于容器，则裁剪多余的
    • scale-down: 图像的尺寸与none或contain中的一个相同，取决于它们之间谁得到的尺寸会更小一些
• 调整图像在背景框的位置
  • 背景图，使用background-position: 默认值:50%,50%
  • <img>,使用object-position:默认值是 50% 50%