我不认为max-height是可行的,但我能够让其余的工作.
http://codepen.io/syren/pen/PNvorN
@mixin aspect-ratio($width, $height) {
position: relative;
max-width:400px;
margin: 0 auto;
display: block;
&:before{
display: block;
content: " ";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.sixteen-nine {
@include aspect-ratio(16,9);
}
你可以做一些媒体查询魔术,你可以改变宽高比在顶部和底部被切断的设备上的工作方式.将高度设置为0时,不能执行max-height,但如果将width设置为0并执行padding-left而不是padding-top或bottom,并且将数学反转,则可能会有效.你可以通过媒体查询.我现在会完全尝试,但我必须重新开始工作.
我找到了一些可能会带你到某个地方的资源.
祝好运!