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

【CSS】保持元素宽高比

保持元素的宽高比,在视频或图片展示类页面是一个重要功能。
本文介绍其常规的实现方法。

实现效果

当浏览器视口发生变化时,元素的尺寸随之变化,且宽高比不变。
在这里插入图片描述

代码实现

我们用最简单的元素结构来演示,实现宽高比为4:3。

<div class="box"></div>
.box {width: 50%;margin: 100px auto;background-color: pink;height: // 要实现高度自适应,这里就不能固定高度了。
}

接下来我们介绍 2 种方案来实现。

aspect-ratio

在 CSS 中有一个 aspect-ratio 属性专门来做这件事情。我们只需增加一行代码即可实现上述效果。

.box {width: 50%;margin: 100px auto;background-color: pink;aspect-ratio: 4 / 3;
}

优点:实现简单。
缺点:兼容性一般。
在这里插入图片描述

如果你介意 aspect-ratio 的兼容性问题,这里还有另一种办法实现。

Padding 大法

直接上完整代码:

<div class="box"><div class="inner-box"><div class="container"><!-- 这里放实际的内容 --></div></div>
</div>
.box {width: 50%;margin: 100px auto;background-color: pink;
}.inner-box {width: 100%;padding-bottom: 75%;position: relative;
}.container {position: absolute;inset: 0;
}

这里我们 inner-boxpadding-bottom 来撑开高度,75% 相对于是其包含块(此处为box)的宽度,以此做到高度自适应。

由于inner-box 的高度为0,这里我们在其内部再加一个元素 container,并设置绝对定位 inset:0来撑满宽高。

相关文章:

【CSS】保持元素宽高比

保持元素的宽高比&#xff0c;在视频或图片展示类页面是一个重要功能。 本文介绍其常规的实现方法。 实现效果 当浏览器视口发生变化时&#xff0c;元素的尺寸随之变化&#xff0c;且宽高比不变。 代码实现 我们用最简单的元素结构来演示&#xff0c;实现宽高比为4&#xf…...

使用 Docker 和 Diffusers 快速上手 Stable Video Diffusion 图生视频大模型

本篇文章聊聊&#xff0c;如何快速上手 Stable Video Diffusion (SVD) 图生视频大模型。 写在前面 月底计划在机器之心的“AI技术论坛”做关于使用开源模型 “Stable Diffusion 模型” 做有趣视频的实战分享。 因为会议分享时间有限&#xff0c;和之前一样&#xff0c;比较简…...

C++ namespace高级用法

高级用法 C++中的命名空间(namespace)是一种用于组织代码的机制,它可以帮助避免命名冲突,并使代码更加清晰和易于维护。以下是C++命名空间的一些高级用法: 嵌套命名空间:命名空间可以嵌套在其他命名空间中,形成一个层次结构。嵌套命名空间可以进一步细化命名空间,使其更…...

如何允许远程访问 MySQL

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 如何允许远程访问 MySQL 现在许多网站和应用程序一开始的 Web 服务器和数据库后端都托管在同一台计算机上。随着…...

PostgreSQL认证考试PGCA、PGCE、PGCM

PostgreSQL认证考试PGCA、PGCE、PGCM 【重点&#xff01;重点&#xff01;重点&#xff01;】PGCA、PGCE、PGCM 直通车快速下正&#xff0c;省心省力&#xff0c;每2个月一次考试 PGCE考试通知 &#xff08;2024&#xff09; 一、考试概览 &#xff08;一&#xff09; 报名要…...

Matlab深度学习进行波形分割(二)

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 &#x1f510;#### 防伪水印——左手の明天 ####&#x1f510; &#x1f497; 大家…...

Markdown高级用法——mermaid

Markdown高级用法——mermaid 起初是写文章&#xff0c;其中有时序图流程图等一般是processOn或者draw.io画截图粘过去的&#xff0c;工作中又是腾讯文档&#xff0c;上面也能画图&#xff0c;但假如我笔记软件用语雀之类的又要把一张图反复粘贴&#xff0c;浪费内存&#xff…...

cf919Div2C题题目总结

Problem - C - Codeforces 这道题其实是一道数学题。 先看第一个变量&#xff0c;也就是我们要求的答案k的数量&#xff0c;但看k是很好确定它的限制条件的&#xff0c;要想均匀分成k份&#xff0c;n%k必须为0&#xff0c;有了k&#xff0c;我们再来看m&#xff0c;对于a(1)和…...

Pandas实战100例 | 案例 4: 数据选择和索引 - 选择特定的列和行

案例 4: 数据选择和索引 - 选择特定的列和行 知识点讲解 在 Pandas 中&#xff0c;选择数据是一个非常常见的操作。你可以选择特定的列或行&#xff0c;或者基于某些条件筛选数据。 示例代码 选择特定的列 # 选择单列 selected_column df[ColumnName]# 选择多列 selected…...

Netty-Netty实现自己的通信框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b; 提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反…...

【算法刷题】总结规律 算法题目第2讲 [234] 回文链表,因为深浅拷贝引出的bug

配合b站视频讲解食用更佳:https://www.bilibili.com/video/BV1vW4y1P7V7 核心提示&#xff1a;好几道题是处理有序数组的&#xff01; 适合人群&#xff1a;考研/复试/面试 解决痛点&#xff1a;1. 刷了就忘 2.换一道相似的题就不会 学完后会输出&#xff1a;对每类题目的框架…...

RabbitMQ如何保证消息不丢失?

RabbitMQ如何保证消息不丢失&#xff1f; 消息丢失的情况 生产者发送消息未到达交换机生产者发送消息未到达队列MQ宕机&#xff0c;消息丢失消费者服务宕机&#xff0c;消息丢失 生产者确认机制 解决的问题&#xff1a;publisher confirm机制来避免消息发送到MQ过程中消失。…...

Random的使用

作用&#xff1a;生成伪随机数 1.导包&#xff1a;import java.util.Random 2.得到随机数对象&#xff1a;Random r new Random(); 3.调用随机数的功能获取随机数&#xff1a; 这里随机生成一个0-9的整数&#xff1a; int number r.nextInt(10); 实现指定区间的随机数&a…...

通过反射修改MultipartFile类文件名

1、背景 项目上有这样一个需求&#xff0c;前端传文件过来&#xff0c;后端接收后按照特定格式对文件进行重命名。(修改文件名需求其实也可以在前端处理的) //接口类似于下面这个样子 PosMapping("/uploadFile") public R uploadFile(List<MultipartFile> fil…...

Macos下修改Python版本

MacOS下修改Python版本 安装 查看本机已安装的Python版本&#xff1a;where python3 ~ where python3 /usr/bin/python3 /usr/local/bin/python3 /Library/Frameworks/Python.framework/Versions/3.12/bin/python3如果没有你想要的版本&#xff0c;去python官网下载安装包。…...

多种采购方式下,数智化招标采购系统建设解决方案

广发证券成立于1991年&#xff0c;是国内首批综合类证券公司&#xff0c;先后于2010年和2015年在深圳证券交易所及香港联合交易所主板上市。 多年来&#xff0c;广发证券在竞争激烈、复杂多变的行业环境中努力开拓、锐意进取&#xff0c;以卓越的经营业绩、持续完善的全面风险…...

Java选择排序

选择排序是一种简单直观的排序算法&#xff0c;其基本思想是每一轮从待排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其与当前位置的元素交换。选择排序的实现步骤可以简要概括为&#xff1a; 初始化&#xff1a; 遍历整个数组&#xff0c;将当前位…...

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-1 坐标系与概念基准

本文仅供学习使用&#xff0c;总结很多本现有讲述运动学或动力学书籍后的总结&#xff0c;从矢量的角度进行分析&#xff0c;方法比较传统&#xff0c;但更易理解&#xff0c;并且现有的看似抽象方法&#xff0c;两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…...

【金猿人物展】DataPipelineCEO陈诚:赋能数据应用,发挥未来生产力

‍ 陈诚 本文由DataPipelineCEO陈诚撰写并投递参与“数据猿年度金猿策划活动——2023大数据产业年度趋势人物榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 我们处在一个“见证奇迹”的时代。在过去的20年间&#xff0c;我们见证了大数据技术快速发展所带…...

4D 毫米波雷达:智驾普及的新路径(二)

4 4D 毫米波的技术路线探讨 4.1 前端收发模块 MMIC&#xff1a;级联、CMOS、AiP 4.1.1 设计&#xff1a;级联、单芯片、虚拟孔径 4D 毫米波雷达的技术路线主要分为三种&#xff0c;分别是多级联、级联 虚拟孔径成像技术、以及 集成芯片。&#xff08; 1 &#xff09;多级…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...