如何在不将img推送到另一行的情况下扩展img

Question

我在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%;
}

Answer 1

您可以使用引导响应图像。http://getbootstrap.com/css/#images

 <img src="..." class="img-responsive" alt="Responsive image">

只需包含该插件并将类img-responsive添加到您的image tag中，就可以了。

或只使用它的class -

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

在您的案例中为

.jak-op{
  opacity:0.5;
  max-width:100%;
  height: auto;
  display: block;
}

Answer 2

设置你的图像宽度为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%;
}