div多张图片自适应div大小

可以使用CSS的flex布局来实现这个效果。

首先，将包含图片的div设置为flex容器：

.container {
  display: flex;
}

然后，给每个图片添加flex属性，使其在容器内均分空间：

.container img {
  flex: 1;
}

最后，将图片的宽度设置为100%以保证图片能够充满整个容器：

.container img {
  flex: 1;
  width: 100%;
}

完整的代码示例：

<div class="container">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>

<style>
.container {
  display: flex;
}

.container img {
  flex: 1;
  width: 100%;
}
</style>

相关问题

div中字体大小自适应

可以使用CSS中的`vw`或`vh`单位来实现字体大小自适应。

`vw`是指相对于视口宽度的单位，1vw等于视口宽度的1%。`vh`是指相对于视口高度的单位，1vh等于视口高度的1%。

例如，假设你要设置一个div的字体大小随着视口大小变化而变化，可以这样写：

div {
  font-size: 5vw;
}

这样，这个div中的文字大小将会随着视口大小的变化而变化。如果视口宽度为1000px，则字体大小为50px（1000 * 0.05），如果视口宽度为500px，则字体大小为25px（500 * 0.05）。

需要注意的是，`vw`和`vh`单位在一些老的浏览器中可能不被支持，因此需要针对不同的浏览器进行兼容性处理。

div图片自适应div大小

要让图片自适应div的大小，可以使用CSS的`background-image`属性，将图片作为div的背景图像，并将`background-size`属性设置为`cover`或`contain`。

例如，如果你有一个div元素，你可以将其CSS代码设置为：

div {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center center;
}

这将使图片充满整个div，同时保持其纵横比例不变。如果你想要图片适应div的大小，可以将`background-size`属性设置为`contain`，这将使图片尽可能大地适应div，同时保持其纵横比例不变。

div {
  background-image: url('path/to/image.jpg');
  background-size: contain;
  background-position: center center;
}

这些CSS代码将使图片自适应div的大小，并且可以在不同大小的屏幕上正确地呈现。