移动端web还原设计稿比例问题

Question

是这样的一个问题，大家看到，中间的两个图片，宽度是100%的，需求是希望中间这个div宽度100%，然后高度保持设计稿的比例，可惜移动端有些比较奇葩的尺寸（小米平板，ipad，iPhone4），
有木有什么办法？

Answer 1

哈哈，先让我占一坑，容我娓娓道来...

html代码

html<div class="box-container">
  <div class="box">
    <img src="" alt=""/>
  </div>
</div>

less代码

less.box-container {
  position: relative;
  width: @img-width;
  &:before {
    content: '';
    display: block;
    padding: 100% 0 0 0; // 这里的top的值为img的高和宽的百分比值，100%时构建的是响应式正方形
  }
  .box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .img {
    display: block;
    width: 100%;
    height: auto;
  }
}

这里神奇的神奇的地方，在于box-container:before，对于before的 padding-top 的百分比的最终计算值是相对 width 来计算的，所以当 padding-top: 100% ，将构建出一响应式正方形，当 padding-top: 50% 将构建出width:height = 2:1的响应式长方形

当通过before将 div.box-container 容器撑成响应式容器时，让 div.box 绝对定位于父容器并且高度和宽度等于100%，使其成为能实际存放元素的容器

Answer 2

不是很明白题主具体的问题，以及，iPad，iPhone4是常见设备，应该要考虑，不能认为是奇葩吧。

宽度自适应屏幕宽度，但保持长宽比，最常见的做法是，用<img>去设置这些图，且只设定width：

<img src="example.jpg" alt="" width="100%">

也许对题主有帮助。