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

在容器内制作具有不同高度比例的图像

1 个答案: