阻止图片自动撑开div

当你在一个`<div>`容器内嵌入图片时，如果图片的尺寸大于容器，它可能会导致`<div>`自动调整大小以容纳图片。为了避免这种情况，你可以使用CSS来设置一些规则来限制图片的宽度或高度，并将其保持在容器内。

下面是一个简单的示例，展示了如何使用CSS的`max-width`属性来阻止图片超出其父容器：

img {
  max-width: 100%; /* 或者设置为具体的百分比值，如100%, 80%等 */
  height: auto; /* 让图片按比例缩放，保持原始宽高比 */
  display: block; /* 确保图片居中显示 */
  overflow: hidden; /* 如果图片超出了容器，隐藏超出部分 */
}

在这个例子中，`max-width: 100%`会让图片的最大宽度等于其容器的宽度，而`height: auto`会让图片的高度根据宽度自动调整。这样就可以防止图片撑开`div`了。

如果你想要图片始终保持原尺寸，并仅在需要时显示滚动条，那么可以使用`object-fit: contain`，它会将图片内容填充到容器内，如果图片溢出则会显示滚动条：

img {
  object-fit: contain;
  overflow: auto;
}