css 图片在容器里不变形

CSS中经常会出现图片在容器里变形的问题，这会影响网站的美观性。那么如何避免图片在容器里发生变形呢？

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

上述代码是一个容器，容器的大小是固定的，同时设置了边框和溢出隐藏。下面的代码是如何实现在容器中嵌入图片并保证不发生变形的。

在容器类中，我们设置了最大宽度和最大高度，这样图片在容器中就不会超出了。同时，图片的大小会自适应容器的大小，这样图片就不会变形。

总之，图片在容器中不变形是一个很重要的问题，而使用上面的代码，我们可以很轻松地解决这个问题。