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

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

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34645.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hi3861 OpenHarmony嵌入式应用入门--LiteOS Event

CMSIS 2.0接口使用事件标志是实时操作系统&#xff08;RTOS&#xff09;中一种重要的同步机制。事件标志是一种轻量级的同步原语&#xff0c;用于任务间或中断服务程序&#xff08;ISR&#xff09;之间的通信。 每个事件标志对象可以包含多个标志位&#xff0c;通常最多为31个&…

SpringBoot条件注解原理

SpringBoot条件注解原理 文章目录 SpringBoot条件注解原理关于Spring Framework中的Conditional关于SpringBootCondition(所有SpringBoot条件注解的根)关于ConditionalOnClass关于OnClassCondition如果判断某个类不存在,filter方法 SpringBoot封装了很多基于Spring Framework中…

军用FPGA软件 Verilog语言的编码准测之三态缓冲器和运算符

军用FPGA软件 Verilog语言的编码准测之三态缓冲器和运算符 语言 &#xff1a;Verilg HDL EDA工具&#xff1a;ISE、Vivado、Quartus II 军用FPGA软件 Verilog语言的编码准测之三态缓冲器和运算符一、引言二、基本编程规范之三态缓冲器强制准则1---禁止组合逻辑电路的输出作为三…

CSS justify-content 不生效的原因 失效

MDN文档&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content CSS justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。 justify-content什么情况下会不生效&#xff08;失效&#xff09;&a…

在码云(Gitee)上建立分支(Branch)的步骤如下:

步骤一&#xff1a;登录码云 首先&#xff0c;打开码云的官方网站&#xff08;gitee.com&#xff09;&#xff0c;输入用户名和密码登录你的账号。 步骤二&#xff1a;创建仓库 登录后&#xff0c;在页面右上方的搜索框中输入仓库名称&#xff0c;并点击“创建”按钮创建新的仓…

API-表单全选反选案例

学习目标&#xff1a; 掌握表单全选反选案例 学习内容&#xff1a; 案例css伪类选择器checked 案例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"…

《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不见影子的少年》这部电视剧以其独特的视角和深刻的主题 给我留下了深刻的印象。该剧讲述了一位与众不同的少年 他无法在阳光下留下影子&#xff0c;象征着他在社会中的孤独与不被理解 观看过程中&#xff0c;可以感受到少年内心的挣扎与渴望 他渴望被接纳&#xff0c;渴…

APM教程-SkyWalking安装和配置

SkyWalking简介 APM (Application Performance Management) 即应用性能管理&#xff0c;属于IT运维管理&#xff08;ITOM)范畴。主要是针对企业 关键业务的IT应用性能和用户体验的监测、优化&#xff0c;提高企业IT应用的可靠性和质量&#xff0c;保证用户得到良好的服务&#…

Java如何设置Map过期时间的的几种方法

一、技术背景 在实际的项目开发中&#xff0c;我们经常会使用到缓存中间件&#xff08;如redis、MemCache等&#xff09;来帮助我们提高系统的可用性和健壮性。 但是很多时候如果项目比较简单&#xff0c;就没有必要为了使用缓存而专门引入Redis等等中间件来加重系统的复杂性…

oracle开放某些视图给特定用户,查询报视图不存在问题

以sysdba身份登录到Oracle数据库。 创建新用户。例如&#xff0c;创建一个名为new_user的用户&#xff0c;密码为password&#xff1a; CREATE USER new_user IDENTIFIED BY password;为新用户分配表空间和临时表空间。例如&#xff0c;将表空间users和临时表空间temp分配给新…

数据库精选题(七)(综合模拟题二)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;数据库 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 一、名词解释 1、事务 2、弱实体集 3、正…

chatglm系列知识

一、目录 chatglm 是什么语言模型与transformer decoder 的区别解释prefix LM与Cause LMchatglm&#xff08;prefix LM&#xff09;与decoder-only LM 核心区别glm 架构chatglm 预训练方式chatglm 微调chatglm与chatglm2、chatglm3的区别chatglm 激活函数采用gelu, 为什么chat…

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线 0. 引言1. 关于m_coast2. 关于m_gshhs3. 关于m_gshhs_c、m_gshhs_I、m_gshhs_i、m_gshhs_h、m_gshhs_f4. 关于m_shaperead5. 结语 0. 引言 本篇介绍下m_map中添加绘制海岸线的一系列函数及其用法&#xff0c;主要函数包括m…

PHP框架详解:Symfony框架的深度剖析

PHP框架详解&#xff1a;Symfony框架的深度剖析 摘要&#xff1a; Symfony是当前最受欢迎的PHP框架之一&#xff0c;它以其强大的功能和灵活性而闻名。本文将详细介绍Symfony框架的核心概念、架构、组件以及其实践应用&#xff0c;帮助读者深入理解这一框架的优势和使用场景。…

【HTML03】HTML表单语法笔记,附带案例-作业

文章目录 表单概述一、表单容器&#xff08;form&#xff09;二、控件相关单词获取本次课程作业和案例 表单概述 允许用户输入信息&#xff0c;和提交信息的-收集用户信息。 表单&#xff1a;表单容器表单控件组成。 控件&#xff1a;输入框、单选按钮、多选、下拉框、多行文…

分布式数据库系统MyCat

MyCat简介 MyCat是一个开源的分布式数据库系统&#xff0c;是一个实现了MySQL协议的服务器&#xff0c;前端用户可以把它看作是一个数据库代理&#xff0c;用MySQL客户端工具和命令行访问&#xff0c;而其后端可以用MySQL原生协议与多个MySQL服务器通信&#xff0c;也可以用JD…

FreeRTOS实时操作系统

1.认识实施操作系统 1.1 裸机和实时操作系统 裸机&#xff1a; 早期嵌入式开发没有嵌入式操作系统的概念&#xff0c;直接操作裸机&#xff0c;在裸机上写程序&#xff0c;比如用51单片机基本就没有操作系统的概念。 通常把程序设计为前后台系统&#xff0c;主要分为两部分&a…

Redis(超详细)

Redis Redis概念&#xff1a; Redis是开源的&#xff0c;遵循BSD的&#xff0c;基于内存数据存储&#xff0c;被用于作为数据库、缓存机制、消息中间件&#xff1b; Redis的特点&#xff1a; 1.高性能key/valu内存xing数据库&#xff1b; 2.支持丰富的数据类型 3.支持持久化&am…

信息系统分析与设计:重点内容|UML在线绘制|数据库技术

目录 UML在线绘图工具信息系统分析与设计第1章 系统思想第2章 信息、管理与信息系统第3章 信息系统建设概论&#x1f31f;第4章 系统规划&#x1f31f;第5章 系统分析概述第6章 流程建模&#x1f31f;业务流程图DFD数据流图&#x1f31f;数据字典 第7章 用例建模(用例图)&#…

Docker搭建yolov8并训练、验证、推理化学仪器数据集

目录 1、安装docker 2、创建yolov8镜像 3、下载代码包 4、下载模型预训练权重 5、制作数据集 6、训练、验证及推理 &#xff08;1&#xff09;训练 &#xff08;2&#xff09;验证 &#xff08;3&#xff09;推理 中文标签显示问题 本文通过docker的方式搭建yolov8运…