当前位置： 首页 > news >正文

前端 CSS 经典：保持元素宽高比

news 2026/5/19 20:33:36

前言：在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。

1. aspect-ratio 属性

使用 aspect-ratio 属性可以直接定义元素的宽高比，但是有兼容性问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}</style></head><body><div class="item"></div><script></script></body>
</html>

2. 使用包含块

再套一层元素，使用 padding-top 撑开包含块，再嵌套一层元素填写类型，绝对定位上包含快。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}.inner {width: 100%;padding-top: 75%;height: 0;position: relative;}.container {position: absolute;width: 100%;height: 100%;}</style></head><body><div class="item"><div class="inner"><div class="container">这是内容</div></div></div><script></script></body>
</html>

相关文章：

前端 CSS 经典：保持元素宽高比

前言&#xff1a;在很多网站&#xff0c;不管页面宽度的变化&#xff0c;都需要里面的图片或者视频&#xff0c;宽高比不变。有两种实现方式。 1. aspect-ratio 属性 使用 aspect-ratio 属性可以直接定义元素的宽高比&#xff0c;但是有兼容性问题 <!DOCTYPE html> &l…...

编程日记 2024/6/25 8:51:49

MES工业一体机的自动化控制技术

MES工业一体机是一种集成了物料管理、生产计划、设备管理、质量控制等功能于一身的智能化生产设备。其自动化控制技术是指通过计算机自动控制系统&#xff0c;实现对生产过程中各种参数的监测、调整和控制&#xff0c;从而提高生产效率、降低生产成本和提高产品质量的一种技术手…...

编程日记 2024/6/25 8:50:48

三品PDM电子行业解决方案介绍 电子企业PDM应用效果

随着全球化和技术创新的不断推进&#xff0c;电子行业正经历着前所未有的发展机遇。然而&#xff0c;随之而来的挑战也日益凸显&#xff0c;尤其是在产品数据管理PDM方面。本文将探讨电子行业在PDM方面的需求&#xff0c;并提出相应的解决方案&#xff0c;以帮助企业提升效率和…...

编程日记 2024/6/25 8:47:44

模拟面试之外卖点单系统（高频面试题目mark）

今天跟大家分享一个大家简历中常见的项目-《外卖点单系统》&#xff0c;这是一个很经典的项目&#xff0c;有很多可以考察的知识点和技能点&#xff0c;但大多数同学都是学期项目&#xff0c;没有实际落地&#xff0c;对面试问题准备不充分&#xff0c;回答时抓不到重点&#x…...

编程日记 2024/6/25 8:46:42

SwiftUI 6.0（iOS 18/macOS 15）关于颜色 Color 的新玩法

概览 WWDC 2024 重装升级的 SwiftUI 6.0 让 Apple 不同平台&#xff08;iOS 18/macOS 15&#xff09;显得愈发的冰壶玉衡、美轮美奂。 之前梦寐以求的颜色混合功能在 WWDC 24 里终于美梦成真啦&#xff01; 在本篇博文中&#xff0c;您将学到如下内容&#xff1a; 概览1. 梦想…...

编程日记 2024/6/25 8:45:41

C++核心编程运算符的重载

C核心编程运算符的重载 文章目录 C核心编程运算符的重载1.“”运算符的重载1.1 作为成员函数重载1.2 作为全局函数重载 2."<<"运算符重载2.1为什么需要重载左移运算符2.2如何重载左移运算符2.3注意事项 3.""运算符重载3.1 前置递增运算符重载3.2后置…...

编程日记 2024/6/25 8:43:39

雷达标定与解析

融合雷达与解析雷达数据的相关代码。感谢开源社区的贡献。以下代码继承了很多人的工作。 如果是单雷达&#xff1a; 直接进行标定&#xff0c;所以就是接收相关的话题然后发布。 lidar_calibration_params.yaml&#xff1a; calibration:在这个接口里面x_offset: 0.0y_offset:…...

编程日记 2024/6/25 8:38:33

养殖自动化温控系统：现代养殖场的智能守护神

现代农业养殖业中&#xff0c;养殖自动化温控系统已经成为提高生产效率和保障动物福利的关键技术之一。本篇文章将深入介绍养殖自动化温控系统的原理、组成、优势及其在不同类型养殖场中的应用实例&#xff0c;并展望该技术的未来发展。 一、养殖自动化温控系统概述 养殖自动…...

编程日记 2024/6/25 8:36:30

用python打印——九九乘法表2

for i in range(1, 10):for j in range(1, i 1):print(f"{j} * {i} {j * i}\t", end)j 1print()外层的 for 循环从 1 到 9 遍历 i。对于每个 i&#xff0c;内层的 for 循环从 1 到 i 遍历 j。在每次循环中&#xff0c;打印出 j 乘以 i 的结果&#xff0c;并以制表…...

编程日记 2024/6/25 8:35:29

如何系统学习机器学习？

我不是计算机专业&#xff0c;第一次接触机器学习还是在研一的时候&#xff0c;当时是看到机器学习可以做号码识别&#xff0c;就觉得好厉害&#xff0c;想学这个。 首次了解到Python这门语言&#xff0c;知道了机器学习可以做什么后&#xff0c;就感觉打开了新世界一样。再后来…...

编程日记 2024/6/25 8:34:28

Qt：1.杂谈

1.前端开发和Qt&#xff1a; 前端开发可以分为网页开发、移动端开发、桌面应用开发。Qt这个技术&#xff0c;是来开发电脑桌面应用程序的&#xff0c;也就是客户端程序的开发。属于比较经典的前端开发体系下。客户端开发的任务&#xff1a;编写和用户交互的界面或者应用程序。大…...

编程日记 2024/6/25 8:33:26

AI视频模型Sora核心功能以及应用场景

随着人工智能技术的飞速发展&#xff0c;AI在视频处理和生成领域的应用正变得越来越广泛。Sora&#xff0c;作为新一代AI视频模型&#xff0c;展示了前所未有的潜力和创新能力。本文将深入探讨Sora的功能、应用场景以及它所带来的革命性变化。 一、Sora的核心功能 1.1 视频生…...

编程日记 2024/6/25 8:31:24

面试-细聊synchronized

1.线程安全问题的主要诱因&#xff1a; 存在多条共享数据(临界资源) 存在多条线程共同操作这些共享数据 解决问题的根本方法&#xff1a; 同一时刻有且仅有一个线程在操作共享数据&#xff0c;其他线程必须等到该线程处理完数据后在对共享数据进行操作。 2.synchroized锁 分…...

编程日记 2024/6/25 8:29:21

AI降重新突破：chatgpt降重工具在学术论文中的应用与效果

论文降重一直是困扰各界毕业生的“拦路虎”&#xff0c;还不容易熬过修改的苦&#xff0c;又要迎来降重的痛。 其实想要给论文降重达标&#xff0c;我有一些独家秘诀。话不多说直接上干货&#xff01; 1、同义词改写&#xff08;针对整段整句重复&#xff09; 这是最靠谱也是…...

编程日记 2024/6/25 8:28:20

Spring学习02-[Spring容器核心技术IOC学习]

Spring容器核心技术IOC学习 什么是bean?如何配置bean?Component方式bean配合配置类的方式import导入方式 什么是bean? 被Spring管理的对象就是bean,和普通对象的区别就是里面bean对象里面的属性也被注入了。 如何配置bean? Component方式、bean配合配置类的方式、import…...

编程日记 2024/6/25 8:27:18

2024上海CDIE 参展预告 | 一站式云原生数字化平台已成趋势

为什么企业需要进行数字化转型&#xff1f;大家都在讨论的数字化转型面临哪些困境&#xff1f;2024.6.25-26 CDIE数字化创新博览会现场&#xff0c;展位【A18】&#xff0c;期待与您相遇&#xff0c;共同探讨企业如何利用数字化技术驱动业务增长。 一、展会介绍——CDIE数字化…...

编程日记 2024/6/25 8:24:15

高考专业组 07组 08组 武汉大学

武汉大学的招生都什么废物点心&#xff0c;搜个专业组都没官方解释&#xff01; 07组&#xff1a;理学&#xff0c;详见下表专业代码07xxxx&#xff0c;例如数学、物理、化学 08组&#xff1a;工学&#xff0c;详见下表专业代码08xxxx&#xff0c;例如机械、电子信息、自动化、…...

编程日记 2024/6/25 8:23:14

解析JavaScript中逻辑运算符和||的返回值机制

本文主要内容&#xff1a;了解逻辑运算符 &&&#xff08;逻辑与&#xff09;和 ||&#xff08;逻辑或&#xff09;的返回值。 在JavaScript中&#xff0c;逻辑运算符 &&&#xff08;逻辑与&#xff09;和 ||&#xff08;逻辑或&#xff09;的返回值可能并不总…...

编程日记 2024/6/25 8:20:10

Java中的数据结构与算法探秘

Java中的数据结构与算法探秘 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 引言 数据结构与算法是计算机科学的基础&#xff0c;对于Java程序员来说&#x…...

编程日记 2024/6/25 8:19:07

AST反混淆实战|嵌套的赋值语句通用还原处理

关注它&#xff0c;不迷路。 本文章中所有内容仅供学习交流&#xff0c;不可用于任何商业用途和非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请联系作者立即删除&#xff01; 1.混淆代码 下面的这段代码是来自px3验证码核心混淆代码: function _u…...

编程日记 2024/6/25 8:18:04

NCMconverter终极指南：3步轻松解密NCM音频，实现全平台播放自由 [特殊字符]

NCMconverter终极指南&#xff1a;3步轻松解密NCM音频&#xff0c;实现全平台播放自由 &#x1f3b5; 【免费下载链接】NCMconverter NCMconverter将ncm文件转换为mp3或者flac文件 项目地址: https://gitcode.com/gh_mirrors/nc/NCMconverter 你是否遇到过从音乐平台下载…...

编程新知 2026/5/19 20:18:55

别再只会用HAL库了！手把手教你用寄存器操作STM32的SysTick定时器（附精准延时函数）

深入STM32 SysTick定时器&#xff1a;寄存器级精准延时实战指南 从库函数到寄存器&#xff1a;为什么需要更底层的控制&#xff1f; 在嵌入式开发领域&#xff0c;时间控制精度往往决定着系统性能的上限。许多开发者习惯使用HAL库或标准库提供的延时函数&#xff0c;却很少思考…...

编程新知 2026/5/19 19:43:58

通过ip命令配置网络地址的方法

cat ../ip_cfg.sh # 为 end1 接口添加一个静态 IP 地址 (例如: 192.168.1.100/24) sudo ip addr add 196.12.0.100/24 dev end1# 激活 end1 接口 sudo ip link set end1 up# &#xff08;可选&#xff09;添加默认网关&#xff0c;例如 192.168.1.1 sudo ip route add default …...

编程新知 2026/5/19 19:28:03

从数学常数到编程实战：用C++三种方法手把手教你计算自然常数e（附OpenJudge NOI 1.5 35题解）

从数学常数到编程实战&#xff1a;用C三种方法手把手教你计算自然常数e 自然常数e是数学中最重要的常数之一&#xff0c;广泛应用于微积分、概率统计和复利计算等领域。对于编程学习者来说&#xff0c;理解e的计算原理并实现其算法&#xff0c;不仅能加深对数学概念的理解&…...

编程新知 2026/5/19 17:43:43

精准定位无版权音乐，快速获取商用授权源，Perplexity音乐搜索避坑全手册，深度拆解7类常见误判场景

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity音乐资源搜索的核心价值与定位 Perplexity 音乐资源搜索并非传统意义上的音频播放器或流媒体平台&#xff0c;而是一个面向开发者、音乐学者与内容创作者的语义化音乐元数据发现引擎。其核心价值在…...

编程新知 2026/5/19 17:14:13

保姆级教程：从Solidworks模型到Matlab SimMechanics仿真，搞定你的六轴机械臂动力学分析

六轴机械臂动力学仿真全流程&#xff1a;从Solidworks到Matlab SimMechanics实战指南 在工业自动化与机器人研发领域&#xff0c;机械臂的动力学仿真已成为验证设计合理性的关键环节。本文将手把手带你完成从Solidworks三维建模到Matlab SimMechanics动力学仿真的完整工作流&am…...

编程新知 2026/5/19 16:28:42

2023B卷，跳格子(1)

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：华为OD面试 文章目录 一、🍀前言 1.1 ☘️题目详情 1.2 ☘️参考解题答案 一、🍀前言 2023B卷，跳格子(1) 。 1.1 ☘️题目详情 题目： 小明和朋友…...

编程新知 2026/5/19 16:13:55

突破60帧限制！《原神》帧率解锁工具完全指南

突破60帧限制&#xff01;《原神》帧率解锁工具完全指南 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 还在为《原神》的60帧限制感到困扰吗&#xff1f;想让你的高刷新率显示器发挥真正…...

编程新知 2026/5/19 15:36:46

基于ESP32的嵌入式AI语音交互系统：从硬件设计到软件实现全解析

1. 项目概述&#xff1a;从零打造一个会聊天的嵌入式AI伙伴几年前&#xff0c;当我第一次把“小爱同学”拆开&#xff0c;看到里面密密麻麻的芯片和电路时&#xff0c;一个念头就冒了出来&#xff1a;能不能自己动手&#xff0c;用一块开发板&#xff0c;从头搭建一个能听会说、…...

编程新知 2026/5/19 15:05:44

RHCE第四次练习

第 1 步&#xff1a;创建脚本文件vim mem_check.sh第 2 步&#xff1a;写入脚本内容第3步&#xff1a;运行脚本...

编程新知 2026/5/19 13:36:45