CSS中居中和响应式图像

.container {
  text-align: center;
}

.container {
  margin-left: auto;
  margin-right: auto;
}

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

.img {
  background-image: url('small.jpg');
}

@media (min-width: 768px) {
  .img {
    background-image: url('medium.jpg');
  }
}

@media (min-width: 1024px) {
  .img {
    background-image: url('large.jpg');
  }
}

<picture>
  <source srcset="small.jpg" media="(max-width: 767px)">
  <source srcset="medium.jpg" media="(min-width: 768px) and (max-width: 1023px)">
  <source srcset="large.jpg" media="(min-width: 1024px)">
  <img src="fallback.jpg" alt="Fallback Image">
</picture>

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1024w" sizes="(max-width: 767px) 100vw, (min-width: 768px) and (max-width: 1023px) 50vw, (min-width: 1024px) 33.3vw" alt="Responsive Image">