是这样的一个问题,大家看到,中间的两个图片,宽度是100%的,需求是希望中间这个div宽度100%,然后高度保持设计稿的比例,可惜移动端有些比较奇葩的尺寸(小米平板,ipad,iPhone4),
有木有什么办法?
哈哈,先让我占一坑,容我娓娓道来...
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%,使其成为能实际存放元素的容器
不是很明白题主具体的问题,以及,iPad,iPhone4是常见设备,应该要考虑,不能认为是奇葩吧。
宽度自适应屏幕宽度,但保持长宽比,最常见的做法是,用<img>
去设置这些图,且只设定width
:
<img src="example.jpg" alt="" width="100%">
也许对题主有帮助。