使用最简单的 CSS 代码来实现网页电影比例
2023-06-13 09:18:22 时间
在摄影中,2.35 比 1 这个比例,可以给人一种电影的感觉。
包括微信公众号的封面,也是这个比例:
在网页设计的时候,我也想用这个比例来实现图片比例的裁切。
我百度了一下,发现有很多方法来呈现这个效果,我找到了最简单的一种。(当然像 ie 浏览器是肯定不支持的,具体可以查看 MDN 文档。)
使用aspect-ratio
这个属性就可以,属性值是宽 / 高
。
例如我有这样一张图片:
我要给图片的img
标签设置比例为:2.35:1的比例,我可以这样写:
aspect-ratio: 2.35 / 1;
以此类推,如需设置 16:9,我们写作:
aspect-ratio: 16 / 9;
css 完整代码如下:
img {
max-width: 100%;
aspect-ratio: 2.35 / 1;
object-fit: cover;
box-sizing: border-box;
overflow: hidden;
}
完整的 html 示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2.35:1</title>
<style>
body {
}
img {
max-width: 100%;
background-color: pink;
aspect-ratio: 2.35 / 1;
object-fit: cover;
box-sizing: border-box;
overflow: hidden;
}
</style>
</head>
<body>
<h1>电影比例测试</h1>
<img src="./demo.jpg" />
</body>
</html>
效果图如下:
相关文章
- 如何制作网页-初学者入门HTML+CSS
- 下载网页中的视频的两种方法「建议收藏」
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
- html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」
- 完整html网页代码_css长度单位
- html css制作静态网页_简单的静态网页代码
- 记一个网页访问慢故障案例(修改)
- CSS媒体查询_css网页
- CSS将整站网页变成黑白色调,致敬英雄!(2020年4月4日全国哀悼日)
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- jQuery实现网页右下角悬浮层提示详解编程语言
- Larbin与MySQL的搭配:加速网页爬取效率(larbinmysql)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 网页缓存的Redis存储之道(网页缓存在redis里面)
- 实现及时网页消息推送利用Redis实现(网页消息推送redis)
- 改进网页可读性的7个方法
- CSS网页布局入门教程10:带当前标识的标签式横向导航
- CSS网页布局入门教程13:下拉及多级弹出式菜单
- 让用户自己控制网页字体的大小的css书写方法
- DIV+CSS作网页容易犯的错误小结
- php压缩多个CSS为一个css的代码并缓存
- jquery网页元素拖拽插件效果及实现
- C#实现将网页保存成图片的网页拍照功能
- 网页运行时提示对象不支持abigimage属性或方法
- Windows下使用apache模块实现合并多个js、css提高网页加载速度