[分享]css中如何让图片自适应

CSS中如何让图片自适应？这是一个常见的问题，特别是在响应式设计中。下面让我们来看一下几种让图片自适应的方法。 / 方法一：使用maxwidth属性 / img { maxwidth: 100; he...

CSS中如何让图片自适应？这是一个常见的问题，特别是在响应式设计中。下面让我们来看一下几种让图片自适应的方法。

 /* 方法一：使用max-width属性 */
img {
  max-width: 100%;
  height: auto;
}

/* 方法二：使用object-fit属性 */
img {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

/* 方法三：使用background-image属性 */
div {
  background-image: url("example.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 图片的高度与宽度比例为4:3 */
}

/* 方法四：使用Flexbox布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
} 

以上就是几种让图片自适应的方法。在实际开发中，我们可以根据实际需求来选择适合的方法实现图片自适应效果。