css如何实现一个元素高度固定宽度按比例显示？

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？

解决后效果如图：

红框标注的即是我在上面高度比例固定的范围内宽度自适应的效果；

css代码：

.content {

      margin: 0 auto;

      height: 79vh;

      .video_box {

        position: relative;

        height: 100%;

        overflow: hidden;

        margin: 0 auto;

        width: 79vh*1.778;

        max-width: 100vw;

        .ad_pic {

          display: none;

          position: absolute;

          top:;

          left:;

          width: 100%;

          height: 100%;

          background: url(6.jpg) no-repeat center;

          background-size: 100% 100%;

          img {

            width: 100%;

            height: 100%;

          }

          .btn_play {

            display: inline-block;

            .width(50);

            .height(50);

            position: absolute;;

            left: 50%;

            top: 50%;

            .margin-left(-25);

            .margin-top(-25);

            background: url(../../public/img/icon_play.png) no-repeat center;

            background-size: 100% 100%;

          }

        }

        iframe, object, embed, video {

          position: absolute;

          top:;

          left:;

          width: 100%;

          height: 100%;

        }

        .video_card {

          position: absolute;

          top:;

          left:;

          width: 2px;

          height: 1px;

        }

      }

    }

html:

 <div class="content">

        <div class="video_box">

            <div class="ad_pic">

                <span class="btn_play"></span>

            </div>

            <video id="ad_video"

                   autobuffer

                   src="a.mp4"

                   autoplay

                   preload

                   controls=""

                   loop

                   poster="6.jpg"

                   webkit-playsinline="true"

                   playsinline="true"

                   x-webkit-airplay="allow"

                   x5-playsinline

                   x5-video-player-type="h5"

                   x5-video-player-fullscreen="true"

                   x5-video-orientation="portrait"

                   >

            </video>

        </div>

    </div>

由于视频是有宽高比的，这里给视频的高度直接是外面盒子的高度*比例，就等于视频的宽，为了防止视频过宽超出屏幕，这里加一个max-width：100vw;限制一下，然后通过margin:0 auto;居中显示，成功解决！

巴特西

css如何实现一个元素高度固定宽度按比例显示？

最新文章

热门文章