css 图片不变形填满div

在网页设计中，经常会遇到这样的需求：把图片放进一个 div 中，使图片填满 div 的宽度和高度，同时不变形。那么该怎么做呢？下面是一种用 CSS 实现的方法。

div {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 100%;
  min-height: 100%;
}

上面的代码中，首先给 div 设置了宽度和高度，使其成为一个固定大小的容器。然后设置了 position: relative 和 overflow: hidden，这两个属性是为了让内部的绝对定位元素进行溢出隐藏，而不会影响到 div 的尺寸计算。

接下来是对 img 的样式设置。首先设置了 position: absolute，使其脱离文档流，然后设置 top 和 left 都为 50%，这是为了让图片的中心点对齐 div 的中心点。

然后使用 transform: translate(-50%,-50%);，将图片在水平和垂直方向上分别向左和向上移动了自身宽度和高度的一半，使其恰好居中。最后设置了 min-width 和 min-height 都为 100%，这是为了让图片占满整个 div。

通过这种方式，我们就可以实现让图片占满 div，同时保持不变形的效果了。