css 图片不超出div

在前端开发过程中，我们经常会使图片显示在一个固定大小的容器中。然而，有时候图片的尺寸大小并不能很好地适应容器大小，就会出现超出容器的情况，这就会影响页面的美观性。CSS提供了一些方法可以让图片不超出div的边界。

<code>.container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
}</code>

如上面的代码所示，我们可以通过将容器的overflow属性设置成hidden，让div容器裁剪其内容。同时，将图片设置成最大宽度为100%，高度自动调整，确保图片不超过容器边界，同时保持图片的比例不变。

如果图片需要居中展示，可以将图片设置为绝对定位，并设置top和left属性，将图片居中显示。代码如下:

<code>.container {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    height: auto;
}</code>

上述代码中，我们将容器设置成相对定位(position: relative)，图片设置成绝对定位(position: absolute)，通过top、left属性将图片居中，并将图片宽度最大值设置为100%。

以上就是让图片不超出div的方法，从而保证页面显示美观。