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

2024年2月5日 287次阅读

有没有办法在CSS中实现这一点,没有
JavaScript？

我想要一个符合以下要求的div：

>它始终保持给定的宽高比(例如4：3)
>它的宽度永远不会超过px中给定的固定最大值,例如800像素
>它的高度永远不会超过给定的固定最大值,例如600px的
>它的尺寸永远不会超过视口的尺寸
>考虑到上述限制,它的大小可以达到
>它垂直和水平居中

换句话说,它应该填充视口宽度或高度,以较大的约束为准,同时保持给定的宽高比;除非它超过固定的最大宽度和/或高度,在这种情况下它将受到限制.

我不在乎需要多少包装纸.

我知道this answer提供了由父母宽度约束的固定宽高比的解决方案,并且很容易使用额外的包装器添加固定最大宽度约束;但我似乎无法看到一种方法来适应增加高度限制.

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

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

Maintaining aspect ratio with min/max height/width?
https://dev.opera.com/articles/css3-object-fit-object-position/

祝好运！

点赞