实现16比9等比例盒子

最新推荐文章于 2022-08-19 11:41:00 发布

蓝色香蕉船

最新推荐文章于 2022-08-19 11:41:00 发布

阅读量6k

点赞数

文章标签： css html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_36290842/article/details/120805689

版权

本文介绍了如何使用JavaScript和CSS两种方法创建16:9比例的盒子。JS实现通过获取元素宽度计算高度，CSS实现则利用百分比属性优雅地达成目标。在CSS方法中，需注意子元素的绝对定位来调整高度计算方式。

摘要由CSDN通过智能技术生成

目录

前言
1. js方式实现
2. css方式实现

前言

整理了下用js和css两种方式实现16比9盒子的方法。

1. js方式实现

实现思路：在页面加载完成后操作dom获取最外层元素的宽度，设置高度为9/16*宽度。

<html>

<head>
  <style>
    #scale {
     
      overflow: hidden
    }
  </style>

</head>

<body>
  <div id="scale">
    <div

最低0.47元/天解锁文章

蓝色香蕉船

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现16比9等比例盒子

目录前言1. js方式实现2. css方式实现前言整理了下用js和css两种方式实现16比9盒子的方法。1. js方式实现实现思路：在页面加载完成后操作dom获取最外层元素的宽度，设置高度为9/16*宽度。<html><head> <style> #scale { overflow: hidden } </style></head><body> <div id="sca
复制链接

扫一扫

蓝色香蕉船 CSDN认证博客专家 CSDN认证企业博客

码龄8年

15: 原创

14万+: 周排名

75万+: 总排名

5万+: 访问

: 等级

218: 积分

9: 粉丝

19: 获赞

9: 评论

111: 收藏

私信

关注

热门文章

分类专栏

最新评论

Flask项目部署：gunicorn+nginx（超详细！！）
brief of gali: [code=cpp] server { listen 8082; server_name 47.100.77.195; #可以用服务器的ip当名字 location / { proxy_pass http://0.0.0.0:8000; } } [/code] 需要监听8000端口吗？还是说只有监听8082端口?，都要监听
Flask项目部署：gunicorn+nginx（超详细！！）
brief of gali: 根账号是root用户？
D3实现折线绘制动画的三种方法
蓝色香蕉船: 通过插值的方法可以让线变的光滑
Flask项目部署：gunicorn+nginx（超详细！！）
weixin_40066648: 非常感谢，看了您的这篇文章顺利部署了后端，只不过一开始发现怎么都登不上nginx的8082端口，后来经过排查发现可能是您写的：“default.config”导致，实际nginx调用的似乎是“default.conf”，我修改了文件名后似乎一切正常了，如果是我误会了还请指正。
在html中请求本地json文件的三种方法
Vogelimkafig: 是的，第一个方法很实用！

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。