使具有不同高度的图像在容器内缩放

Question

我有三个图像放在一个容器中。其中两张图片的高度相同，而另一张略高。当用户调整屏幕大小时，如何让所有三个图像在缩小时保持当前比例？

HTML

<div class='wrapper-inner panel centered green'>
<section class='content'>
  <article class='full'>
    <h2>Title of section four.</h2>
    <div class="phone-container">

      <img src='http://placehold.it/276x490' class="phone-1 desktop" style="border: 1px solid blue;" />
      <img src='http://placehold.it/320x516' class="phone-2" style="border: 1px solid red;" />
      <img src='http://placehold.it/276x490'class="phone-3 desktop" style="border: 1px solid blue;" />

    </div>
  </article>
</section>

CSS

.desktop {
  display: none;
}

@media only screen and (min-width: 768px) {
  .phone-container {
    margin: 0 auto;
    position: relative;
  }
  .phone-container img {
    display: inline-block;
    margin-bottom: -1px;
    margin-top: 0 !important;
    position: relative;
    max-width: 320px !important;
  }
  .phone-container .phone-1 {
    width: 276px;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
    z-index: 2;
    position: relative;
  }
  .phone-container .phone-3 {
    width: 276px;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    z-index: 2;
    position: relative;
  }
  .phone-container .phone-2 {
    width: 320px;
    z-index: 3;
    position: relative;
  }
  .centered {
    text-align: center;
  }
}

从我的jsFiddle 中，您可以看到我的图像彼此内联显示，两个外部图像位于中间图像之下。这是我想要在浏览器窗口变小直到移动查询启动时保持的定位。

Answer 1

也许使用百分比宽度可能是一个解决方案？

Like this

@media only screen and (max-width: 968px) {
  .phone-container {
    margin: 0 auto;
    position: relative;
  }
  .phone-container img {
    display: inline-block;
    margin-bottom: -1px;
    margin-top: 0 !important;
    position: relative;
    max-width: 30% !important;
  }
  .phone-container .phone-1 {
    width: 20%;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
    z-index: 2;
    position: relative;
  }
  .phone-container .phone-3 {
    width: 20%;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    z-index: 2;
    position: relative;
  }
  .phone-container .phone-2 {
    width: 25%;
    z-index: 3;
    position: relative;
  }
  .centered {
    text-align: center;
  }
}