html固定宽度且居中,html – 固定宽高比div,受视口约束,居中,最大宽度和高度

我不认为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,并且将数学反转,则可能会有效.你可以通过媒体查询.我现在会完全尝试,但我必须重新开始工作.

我找到了一些可能会带你到某个地方的资源.

祝好运！