css 图片不超过div边框

CSS中的图片控制是非常重要的，一个常见的需求是控制图片显示在一个容器中，保证不超过容器的边框。接下来，我们就来介绍一下该如何实现CSS图片不超过div边框的效果。

首先，我们需要使用CSS来控制图片的大小和位置。针对这个问题，我们可以使用两种不同的CSS属性：width和height属性和max-width和max-height属性。其中，width和height属性直接控制元素的宽度和高度，而max-width和max-height属性则能够保证图片不超过容器的边框。

div {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

代码中，我们首先声明了一个div容器，并设置了其宽度、高度和边框。接着，我们使用overflow:hidden属性来隐藏内容超出容器边框的部分。最后，我们使用了max-width和max-height属性，并将它们的值都设置为100%。这样，无论图片大小如何，都能够保证不超过容器边框。

需要注意的是，在为图片设置max-width和max-height属性之前，我们需要将其display属性设置为block，这样才能按照我们的要求来显示图片。

总的来说，控制CSS中的图片不超过div边框只需要使用max-width和max-height属性即可。此外，我们还需使用display:block属性来确保图片能够根据我们的要求来显示。