制作容器内具有不同高度的图像。

Question

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

<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

也许用百分之宽可以解决这个问题？

像这样

@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;
  }
}