【CSS】CSS新单位vmin和vmax

news2024/9/23 23:31:06

通过vmin单位可以自动取视口宽度和高度中较小的那个值，vmax同理。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      width: 100vmin;
      height: 100vmin;
    }
  </style>
</head>

<body>
  <img src="./any.jpg" alt="">
</body>

</html>

此时视口宽度大于高度
在这里插入图片描述
此时视口高度大于宽度
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

百度智能云通用文字识别（标准版）- java.lang.NoSuchFieldError: Companion

百度智能云通用文字识别（标准版）- java.lang.NoSuchFieldError: Companion

需求环境 ORC识别图片信息 参考百度示例 百度智能云API文档通用文字识别 官方示例 package baidu.com;import okhttp3.*; import org.json.JSONObject;import java.io.*;/*** 需要添加依赖* <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp -->…
阅读更多...
8.16-ansible的应用

8.16-ansible的应用

ansible ansible是基于模块工作的&#xff0c;本身没有批量部署的能力。真正具有批量部署的是ansible所运行的模块&#xff0c;ansible只是提供一种框架。 格式 ansible 主机ip|域名|组名|别名 -m ping|copy|... 参数 1.ping模块 m0 # 查看有没有安装epel ​ [rootm0 ~]#…
阅读更多...
在vue3中配置scss

在vue3中配置scss

要在 Vue 3 中使用 SCSS&#xff08;Sass 的一个子集&#xff09;&#xff0c;你需要安装相应的依赖&#xff0c;并对项目进行一些配置。下面是详细的步骤&#xff1a; 步骤 1: 安装依赖 首先&#xff0c;你需要安装 sass 和 vue-loader&#xff08;如果你使用的是 Vue CLI&a…
阅读更多...
vue 2.x + @vue/cli 4.x开发阶段使用Vite

vue 2.x + @vue/cli 4.x开发阶段使用Vite

项目用的是vue 2.x vue/cli 4.x(webpack 4.x)。冷启动项目时耗时较长&#xff0c;达到了2分钟以上。热更新时间也达到了10s以上。严重影响了开发体验和效率。 解决问题的过程中遵循2个原则&#xff1a; 不对会影响原构建流程的代码进行改动&#xff0c;向原Webpack构建兼容。…
阅读更多...
加密创投周期进化论：未来或黯淡，但流动性是那道光

加密创投周期进化论：未来或黯淡，但流动性是那道光

加密创投领域的风起云涌&#xff0c;而在2022年后&#xff0c;加密市场逐渐进入“行业阵痛期”&#xff0c;面对熊市的寒冬&#xff0c;整个行业的流动性急剧减少&#xff0c;市场的发展被迫寄希望于“板块轮动”的交替炒作。尽管如此&#xff0c;比特币生态和L2生态的兴起&…
阅读更多...
树莓派开发笔记03-树莓派的GPIO口输入检测

树莓派开发笔记03-树莓派的GPIO口输入检测

github主页&#xff1a;https://github.com/snqx-lqh gitee主页&#xff1a;https://gitee.com/snqx-lqh 本项目github地址&#xff1a;https://github.com/snqx-lqh/RaspberryPiLearningNotes 本项目gitee地址&#xff1a;https://gitee.com/snqx-lqh/RaspberryPiLearningNote…
阅读更多...
LLAMA 3.1 论文的见解

LLAMA 3.1 论文的见解

这有什么大不了的&#xff1f; LLAMA 3.1 的发布标志着 AI 开发的一个重要里程碑。开源模型首次接近领先的闭源模型的性能水平。这一转变预示着未来开源模型同样有效&#xff0c;任何人都可以灵活地修改和调整它们。马克扎克伯格将此与 Linux 的开源性质进行了比较&#xff0c;…
阅读更多...
Mysql原理与调优-如何进行sql优化

Mysql原理与调优-如何进行sql优化

1.绪论 本文主要讲解我们如何优化一个sql。优化的过程主要分为3个步骤&#xff0c;找到哪些sql需要被优化&#xff0c;这就需要用到慢sql日志。然后发现慢SQL为什么慢&#xff0c;即当前sql是如何执行的&#xff0c;这就需要用到执行计划。最后才是对sql进行优化&#xff0c;对…
阅读更多...
作业帮 TiDB 7.5.x 使用经验

作业帮 TiDB 7.5.x 使用经验

作者&#xff1a; 是我的海 原文来源&#xff1a; https://tidb.net/blog/5f9784d3 近期在使用 TiDB 时遇到的一些小问题的梳理总结&#xff0c;大部分版本都在6.5.6和7.5.2 1、limit 导致的扫描量过大的优化 研发定时任务每天需要扫描大量数据&#xff0c;到时机器网卡被…
阅读更多...
26.10 Django Ajax异步提交

26.10 Django Ajax异步提交

1. 表单提交 1.1 表单的作用 表单是Web开发中常见的数据收集方式, 它允许用户通过表单输入数据, 并通过提交操作将这些数据发送到服务器进行处理.表单提交方式主要分为两大类: 传统的同步提交(也称为标准提交)和异步提交(主要通过Ajax实现). 它们在工作方式, 用户体验和数据传…
阅读更多...
语音助手Verbi：科技创新的未来

语音助手Verbi：科技创新的未来

今天&#xff0c;我要向大家介绍一个名为Verbi的语音助手项目。这是一个结合了多种先进技术的模块化语音助手应用程序&#xff0c;能够实现语音到文本、文本生成和文本到语音的全流程处理。通过这个项目&#xff0c;我们可以体验到尖端科技如何改变我们的日常生活。 Verbi的诞…
阅读更多...
PHP安全开发

PHP安全开发

安全开发 PHP 基础 增&#xff1a;insert into 表名(列名 1, 列名 2) value(‘列 1 值 1’, ‘列 2 值 2’); 删&#xff1a;delete from 表名 where 列名 ‘条件’; 改&#xff1a;update 表名 set 列名 数据 where 列名 ‘条件’; 查&#xff1a;select * from 表名 wher…
阅读更多...
【STM32 Blue Pill编程】-外部中断配置及使用

【STM32 Blue Pill编程】-外部中断配置及使用

外部中断配置及使用 文章目录 外部中断配置及使用1、中断介绍2、STM32中的中断3、硬件准备及接线4、GPIO配置5、代码实现在本文中，我们将介绍如何使用 STM32Cube IDE 中的 HAL 库配置和处理外部中断。 我们将通过一个带有按钮和 LED 的示例来演示这一点。 读完本文后，您将能够…
阅读更多...
简单了解JVM执行Java程序的基本流程 | 一次编译，到处运行

简单了解JVM执行Java程序的基本流程 | 一次编译，到处运行

前言&#xff1a; Java代码怎么做到一次编译&#xff0c;到处运行的呢&#xff1f;靠JVM&#xff0c;那JVM的执行流程是什么呢&#xff1f; 简单来说&#xff1a;通过Javac编译器将Java源代码编译成字节码&#xff0c;JVM通过类加载器将字节码加载到运行时数据区中&#xff0c;…
阅读更多...
C++学习笔记之数据结构

C++学习笔记之数据结构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、二叉树1.1 二叉树的遍历1.1.1 深度优先搜索&#xff08;DFS&#xff09;1.1.2 广度优先搜索&#xff08;BFS&#xff09; 1.2 对称性&#xff08;递归法&#x…
阅读更多...
【论文笔记】LION: Linear Group RNN for 3D Object Detection in Point Clouds

【论文笔记】LION: Linear Group RNN for 3D Object Detection in Point Clouds

原文链接&#xff1a;https://arxiv.org/abs/2407.18232 简介&#xff1a;Transformer在3D点云感知任务中有二次复杂度&#xff0c;难以进行长距离关系建模。线性RNN则计算复杂度较低&#xff0c;适合进行长距离关系建模。本文提出基于窗口的网络线性组RNN&#xff08;即对分组…
阅读更多...
Android 上下滑隐藏显示状态栏

Android 上下滑隐藏显示状态栏

一、DisplayPolicy类中监听滑动事件&#xff0c;然后发送广播事件 Android12类路径&#xff1a; frameworks/base/services/core/java/com/android/server/wm/DisplayPolicy.javamSystemGestures new SystemGesturesPointerEventListener(mUiContext, mHandler,new SystemGest…
阅读更多...
《机器学习》周志华-CH1（绪论）

《机器学习》周志华-CH1（绪论）

1.1引言 机器学习&#xff08;Matchine-Learning&#xff09;所研究的主要内容是关于在计算机上从数据中产生“模型”&#xff08;model&#xff09;的算法&#xff0c;即“学习算法”&#xff08;learning algorithm&#xff09;。可以说机器学习&#xff08;Matchine-Learni…
阅读更多...
2024最新最全面一线大厂面试Tips丨接口测试面试题

2024最新最全面一线大厂面试Tips丨接口测试面试题

面试Tips# 面试是求职过程中至关重要的环节。在如今竞争激烈的就业市场&#xff0c;拥有优秀的面试技巧和良好的面试礼仪显得尤为重要&#xff0c;同样掌握这个的行业面试题也不可或缺。 01 你们公司的接口测试流程 是怎样的&#xff1f; &#xff08;有没有感觉熟悉&#…
阅读更多...
[Linux][OS][信号的捕捉] 可重入函数 | volatile | SIGCHLD信号

[Linux][OS][信号的捕捉] 可重入函数 | volatile | SIGCHLD信号

回顾&#xff1a;[Linux][OS][信号的保存和处理] 信号捕捉 1.sigaction int sigaction(int signo, const struct sigaction *act, struct sigaction *oact); 参数&#xff1a; signo&#xff1a;指定信号的编号act&#xff1a;输入型参数&#xff0c;根据act修改该信号的处…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023