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: cover; /* 裁剪并覆盖 */
  /* 或者使用 */
  object-fit: contain; /* 缩放以包含 */
}

3. 使用 background-image 属性：

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

4. 使用 padding-top 或 padding-bottom 百分比：

div {
  width: 300px;
  position: relative;
}
 
div::before {
  content: '';
  display: block;
  padding-top: 100%; /* 使得div的padding-top等于其width */
}
 
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上方法可以根据具体需求选择使用。