Cover和contain属性

一.背景的盒子

代码:

  <body>
    <div class="box"></div>

    <style>
      .box {
        width: 500px;
        height: 500px;
        border: 1px solid #ccc;
        background: url(./20191017095131790.png) no-repeat;
      }
    </style>
  </body>

盒子的宽度和高度是500px

二.图片的大小

424X269

三.显示的效果

四.cover的效果

五.cation的效果

六.总结

1.cover沾满了这个盒子,图片显示的不完整。

2.cation 以图片的长边进行拉伸,在案例中也就是424这条边,进行拉伸,宽度也是,使图片完整显示,可能会有多余的留白。

3.区别:cover占满了整个盒子 图片显示可能不完整 ,cation图片显示的完整,可能会有多余的部分。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBootRest服务调用

目录 RestTemplate 依赖配置 自定义RestTemplate webCilent 依赖配置 自定义webCilent springboot中有两种方式实现Rest远程服务调用&#xff0c;分别是RestTemplate与webCilent。下面分别介绍一下这两种方式。 RestTemplate 依赖配置 RestTemplate是Spring Framework提供的…

不会做UI自动化测试?一起设计框架再实践吧

目的 相信做过测试的同学都听说过自动化测试&#xff0c;而UI自动化无论何时对测试来说都是比较吸引人的存在。 相较于接口自动化来说它可以最大程度的模拟真实用户的日常操作与特定业务场景的模拟&#xff0c;那么存在即合理&#xff0c;自动化UI测试自然也是广大测试同学职…

2.23日学习打卡----初学Nginx(二)

2.23日学习打卡 目录: 2.23日学习打卡一. Nginx 虚拟主机虚拟主机的分类Nginx支持三种类型的虚拟主机配置Nginx虚拟主机单网卡多IP配置Nginx虚拟主机_基于域名虚拟主机配置Nginx虚拟主机基于多端口的配置4 二. Nginx 核心指令root和alias指令的区别return指令rewrite指令rewrit…

Vue | (六)使用Vue脚手架(下)| 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;Vue 中的自定义事件&#x1f407;使用方法&#x1f407;案例练习&#x1f407;TodoList案例优化 &#x1f4da;全局事件总线&#x1f407;使用方法&#x1f407;案例练习&#x1f407;TodoList案例优化 &#x1f4da;消息订阅与发布&#x1f407;使用方法…

RCE (Remote ????? execution) --->CTF

看这个标题就知道今天的内容不简单&#xff01;&#xff01;&#xff01;&#xff01; 那么就来讲一下我们的RCE吧 目录 ​编辑 1. &&#xff1f; |&#xff1f; ||&#xff1f; &&&#xff1f; 2.PHP命令执行函数&& ||"" 1."" &…

USB Micro引脚及相应原理图绘制

前言&#xff1a;博主为实现绘制USB Micro输入口原理图&#xff0c;首先在 GD32F103XX的数据手册中找到引脚的功能描述&#xff0c;找到USBDM与USBDP功能&#xff0c;分别为引脚PA11与引脚PA12。然后进行相应的原理图绘制。 * USBDM。USBDM 引脚是与通用串行总线 (Universal Se…

java数据结构与算法刷题-----LeetCode106. 从中序与后序遍历序列构造二叉树

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 1. 法一&#xff1a;递归 解题思路&#xff1a;时间复杂度O(n),空间复杂度…

人工智能 — 相机模型和镜头畸变

目录 一、相机模型1、相机与图像2、坐标系1、世界坐标系2、相机坐标系3、图像物理坐标系4、图像像素坐标系 3、相机成像4、世界坐标系到摄像机坐标系5、欧氏变换6、齐次坐标7、摄像机坐标系到图像物理坐标系8、图像物理坐标系到图像像素坐标系9、摄像机坐标系到图像像素坐标系1…

图解目标检测 之 【YOLOv9】 算法 最全原理详解

YOLOv9与SOTA模型对比 什么是 YOLOv9&#xff1f;YOLOv9是YOLO系列中的最新产品&#xff0c;是一种实时目标检测模型。它通过先进的深度学习技术和架构设计&#xff0c;包括通用 ELAN (GELAN) 和可编程梯度信息 (PGI)&#xff0c;展现出更好的性能。 YOLO 系列通过引入计算机视…

C++入门学习(三十七)函数分文件编写【DEV】

创建.h后级名的头文件创建.cpp后缀名的源文件在头文件中写函数的声明在源文件中写函数的定义 一、选择文件、新建、项目 二、 选择Empty Project 三、 新建源文件New File 四、贴代码 test.cpp #include <iostream> #include "add.h" using namespace std;i…

在Sora引爆视频生成时,Meta开始用Agent自动剪视频了

未来&#xff0c;视频剪辑可能也会像视频生成领域一样迎来 AI 自动化操作的大爆发。 这几天&#xff0c;AI 视频领域异常地热闹&#xff0c;其中 OpenAI 推出的视频生成大模型 Sora 更是火出了圈。而在视频剪辑领域&#xff0c;AI 尤其是大模型赋能的 Agent 也开始大显身手。 …

PMP项目管理考试要注意些什么?

PMP考试和PMP备考过程中应该注意哪些问题&#xff1f; PMP备考完成后就要迎接实战考试了&#xff0c;考试前千万不要有多余的想法&#xff0c;顺其自然就行了&#xff0c;我想大家各种紧张、各种忧虑的原因大抵是因为考试成本考&#xff0c;担心考不过&#xff0c;其实只要你在…

Java后端服务接口性能优化常用技巧

接口性能优化常用技巧 前言1.数据库索引2.慢SQL优化3.异步执行4.批量处理5.数据预加载6.池化技术&#xff08;多线程&#xff09;8.事件回调机制9.串行改为并行调用10.深度分页问题 前言 对于高标准程序员来说提供高性能的服务接口是我们所追求的目标&#xff0c;以下梳理了一…

Linux安装Zookeeper

目录 下载配置启动 下载 下载链接 https://archive.apache.org/dist/zookeeper/上传 我直接本地下好了&#xff0c;拖到对应文件夹解压&#xff0c;重命名&#xff0c;注意路径 tar -zxvf /opt/Zookeeper/apache-zookeeper-3.7.2-bin.tar.gz -C /opt/ mv /opt/apache-zookeep…

WPF真入门教程29--MVVM常用框架之MvvmLight

1、MVVM模式回顾 关于mvvm模式的基础知识&#xff0c;请看这2个文章&#xff1a; WPF真入门教程23--MVVM简单介绍 WPF真入门教程24--MVVM模式Command命令 做过VUE开发或微信小程序开发的伙伴&#xff0c;就知道MVVM模式&#xff0c;核心就是数据驱动控件&#xff0c;全栈开…

【EAI 025】Ego4D: Around the World in 3,000 Hours of Egocentric Video

Paper Card 论文标题&#xff1a;Ego4D: Around the World in 3,000 Hours of Egocentric Video 论文作者&#xff1a;Kristen Grauman, Andrew Westbury, Eugene Byrne, et al. 作者单位&#xff1a;UC Berkeley, CMU, Google 论文原文&#xff1a;https://arxiv.org/abs/2110…

【MySQL高可用集群】MySQL的MGR搭建

前情提要&#xff1a; MySQL官方在 5.7.17版本正式推出组复制&#xff08;MySQL Group Replication&#xff0c;简称MGR&#xff09;&#xff0c;使用类似 zookeeper 的多于一半原则。在一个集群由 2N1 个节点共同组成一个复制组&#xff0c;一个事务的提交&#xff0c;必须经过…

Babylonjs学习必备

基于babylonjs封装的一些功能和插件 &#xff0c;希望有更多的小伙伴一起玩babylonjs&#xff1b; 欢迎加群&#xff1a;464146715 ​ 官方文档 中文文档 Babylonjs案例分享 ​ ​

kafka生产者2

1.数据可靠 • 0&#xff1a;生产者发送过来的数据&#xff0c;不需要等数据落盘应答。 风险&#xff1a;leader挂了之后&#xff0c;follower还没有收到消息。。。。 • 1&#xff1a;生产者发送过来的数据&#xff0c;Leader收到数据后应答。 风险&#xff1a;leader应答…

Vision Mamba:使用双向状态空间模型进行高效视觉表示学习

模型效果 将DeiT和Vim模型之间的性能和效率比较&#xff0c;为了进行准确性比较&#xff0c;我们首先在IN1K分类数据集上预训练DeiT和Vim&#xff0c;然后在不同的下游密集预测任务上微调通用主干&#xff0c;即&#xff0c;语义分割、目标检测、实例分割。结果表明&#xff0c…