css图片更随div缩小

CSS图片响应式布局，是指在不同屏幕尺寸下，能够更好地适应不同的设备。这种设计方式有许多好处，如提高用户体验、增加网站流量以及提高搜索引擎排名。

在网页设计中，尤其是在移动设备上，纵向排列的图片比较流行。但如果我们需要将图片置于页面中心并使其随着div容器缩小而缩小，就需要使用CSS技术来实现。下面就给大家介绍一种简单的方法：

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.image-wrapper {
  max-width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

上面的代码中，我们首先在父容器（.container）中设置了一个最大宽度，并将其居中放置。接着，在.image-wrapper容器中，我们设置了一个最大宽度并将其显示为内联块，以便在内容缩小时能够随时调整大小。最后，在img元素中，我们将最大宽度设置为100%并使用绝对定位将它放置在容器中心。

通过这种方法，图片始终都会保持居中，并且随着容器大小的变化而缩放。这样我们就能够在不同设备上，更好地展示我们的网页了。