自适应大小的图片：使用 CSS 实现图片位置的响应式布局

.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 图片的高度占容器宽度的比例，可以根据实际情况调整 */
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例缩放填充容器 */
  top: 0;
  left: 0;
}

使用一个包含图片的<div>元素作为容器，并设置容器的宽度为 100%。通过设置容器的padding-bottom来实现容器的高度自适应，比例为图片的高度与宽度的比例。

图片使用绝对定位，宽度和高度都设置为 100%，并使用object-fit: cover属性来按比例缩放填充容器。通过设置top: 0和left: 0将图片定位到容器的左上角。

这样，无论容器的宽度如何改变，图片都会自适应地缩放并保持在容器中心位置。