如何防止div中的图片变形？ - CSS object-fit属性详解

使用CSS中的object-fit属性来控制图片在div中的显示方式，避免变形。例如，可以将object-fit属性设置为contain，这样图片会在保持原始比例的情况下尽量显示完整，不会变形：

div img {
  object-fit: contain;
}

还可以将object-fit属性设置为cover，这样图片会被放大或缩小，以适应div的尺寸，但可能会有部分内容被裁剪：

div img {
  object-fit: cover;
}

另外，还可以通过设置div的宽度和高度来控制图片的显示大小，以适应div的尺寸，同时保持原始比例：

div {
  width: 300px;
  height: 200px;
}

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

根据需要选择适合的方式来控制图片在div中的显示效果，避免变形。