HTML如何让IMG自动适应DIV容器大小的实现方法

9 min read

为了让IMG自适应大小，如下我做了一个横向自适应的示例：

  • IMG样式（横向拉伸，纵向自动匹配大小）
  • DIV样式（元素居中显示）

IMG样式

（横向拉伸，纵向自动匹配大小）

width:100%; height:auto;

（纵向拉伸，横向自动匹配大小）

width:auto; height:100%;

DIV样式（元素居中显示）

display:flex; align-items:center; justify-content:center;

做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：

img{ width:auto; height:auto; max-width:100%; max-height:100%;}

这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：

  • width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
  • height:auto;图片的高度自己适应(图片有多高就显示多高)
  • width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
  • max-width:100%;图片的宽度不能超过图片所在的空间的宽度
  • max-height:100%;图片的高度不能超过图片所在的空间的高度
  • max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

示例代码

如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示

<style>
.ShaShiDi{
  width:500px;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center; 
}

.ShaShiDi img{ 
  width:100%; 
  height:auto;
}


<div class="ShaShiDi"> <img src="./1.png"/> </div> 
<div class="ShaShiDi"> <img src="./2.png"/>

CSS 未知大小IMAGE填满DIV

.scale-wrap {
  width:500px;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center; 
  border: 1px solid red;
}
.scale{
  width:100%; 
  height:100%;;
}


<div class="scale-wrap">
      <img src="https://w.wallhaven.cc/full/8o/wallhaven-8oky1j.jpg" class="scale" />
</div>