css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应

在CSS中，要实现图片自适应容器，可以使用多种方法，以下是几种常用的方法：

1. 使用 max-width 和 max-height 属性：

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

2. 使用 object-fit 属性（适合保持图片的宽高比）：

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

3. 使用 background-image 属性，并利用背景的 background-size 属性：

div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

4. 使用 flexbox 布局：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
}
 
.container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

在这些方法中，object-fit 和 background-size 是最灵活和最常用的方式，可以保持图片的原始宽高比，同时适应容器的大小。