.container {
display: flex;
justify-content: space-between;
}
.img-wrapper {
width: 30%;
}
.img-wrapper img {
width: 100%;
height: auto;
}
首先,我们需要给图片所在的容器设置一个display:flex属性,这样三张图片就可以分别排列在左、中、右三个位置。而justify-content:space-between可以让它们之间有一定的间隔。
然后我们要给图片设置一个宽度为30%左右,这样三张图片就能并排展示了。最后设置img标签的width为100%,height为auto,即可让图片按照等比例缩放。
当然,这只是一种实现方式,根据具体需求还可以使用float浮动,或者grid网格布局等方式来实现三张图片的并排展示。