如何防止 Div 内图片变形：完整指南

要让装在 Div 里的图片不变形，可以使用 CSS 的 background-size 属性来控制背景图片的大小。

首先，将图片作为 Div 的背景图片，可以使用 CSS 的 background 属性来设置：

.div {
  background-image: url('图片路径');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

然后，将 background-size 属性设置为 'cover'，这样背景图片会自动调整大小，保持图片的原始比例，并且尽可能填充整个 Div 区域。

如果想要保持图片的原始比例，但是又要完全显示图片，可以将 background-size 属性设置为 'contain'：

.div {
  background-image: url('图片路径');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

这样背景图片会自动调整大小，保持图片的原始比例，并且完全显示在 Div 区域内。

另外，为了确保 Div 的大小与背景图片的比例相对应，可以设置 Div 的宽度和高度：

.div {
  width: 500px;
  height: 300px;
}

以上是一种方法，如果不使用背景图片而是直接将图片放在 Div 中，可以使用 CSS 的 object-fit 属性来控制图片的大小：

.div {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样可以将图片按照 Div 的大小进行适应，保持图片的原始比例，并且不变形。