html - 如何缩放图像而不将其推到另一行

我在div中有3张图像，当我调整浏览器大小时，这些图像无法缩放，它们仅移动到彼此下方的另一行。我希望他们先扩大规模，然后再下降，但是我不知道该如何实现，请帮忙。

<div class="jak-d">
<img class="jak-op" style="margin: 0px 20px 0px 0px;" alt="" src="/library/images/im1.png" />
<img class="jak-op" style="margin: 0px 20px 0px 20px;" alt="" src="/library/images/im2.png" />
<img class="jak-op" style="margin: 0px 0px 0px 20px;" alt="" src="/library/images/im3.png" />
</div>

CSS：

.jak-d{
  height:auto;
  max-width:100%;
  margin-top:70px;
  margin-bottom:100px;
}
.jak-op{
  opacity:0.5;
  max-width:100%;
}

最佳答案

将图像宽度也设置为100％，而不仅仅是最大宽度。

.jak-d{
 height:auto;
 max-width:100%;
 width:100%;
 margin-top:70px;
 margin-bottom:100px;
}
.jak-op{
 opacity:0.5;
 max-width:100%;
 width:100%;
}