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

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图片显示的完整,可能会有多余的部分。

相关文章:

  • 算法沉淀——动态规划之简单多状态 dp 问题(上)(leetcode真题剖析)
  • 【0基础也能学会】JMeter:如何开始简单的WEB压力测试?
  • Vision Mamba:使用双向状态空间模型进行高效视觉表示学习
  • 微服务Day6
  • 5.22 BCC工具之deadlock.py解读
  • 相机选型介绍
  • WordPress后台自定义登录和管理页面插件Admin Customizer
  • 工厂设计模式总结
  • 【GameFramework框架内置模块】2、数据节点(Data Node)
  • 体验LobeChat搭建私人聊天应用
  • 编译遇到 AT_CHECK 未定义
  • 常用的消息中间件RabbitMQ
  • F.softmax以及多维张量的相乘
  • 面试答疑03
  • 【buuctf-我吃三明治】
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • 2018一半小结一波
  • Angular数据绑定机制
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • Redis的resp协议
  • SAP云平台里Global Account和Sub Account的关系
  • 关于List、List?、ListObject的区别
  • 记录一下第一次使用npm
  • 我这样减少了26.5M Java内存!
  • Java数据解析之JSON
  • 东超科技获得千万级Pre-A轮融资,投资方为中科创星 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • $().each和$.each的区别
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • (2/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (70min)字节暑假实习二面(已挂)
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (Forward) Music Player: From UI Proposal to Code
  • (ibm)Java 语言的 XPath API
  • (二)斐波那契Fabonacci函数
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (简单) HDU 2612 Find a way,BFS。
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .NET Core 2.1路线图
  • .NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .net2005怎么读string形的xml,不是xml文件。
  • .NET6使用MiniExcel根据数据源横向导出头部标题及数据
  • .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比
  • /etc/sudoers (root权限管理)
  • @Bean有哪些属性
  • @软考考生,这份软考高分攻略你须知道
  • [20161101]rman备份与数据文件变化7.txt
  • [android] 练习PopupWindow实现对话框
  • [AutoSar]BSW_Memory_Stack_004 创建一个简单NV block并调试
  • [BJDCTF2020]The mystery of ip1
  • [Django开源学习 1]django-vue-admin
  • [Fri 26 Jun 2015 ~ Thu 2 Jul 2015] Deep Learning in arxiv
  • [hdu 4405] Aeroplane chess [概率DP 期望]
  • [IE技巧] 如何让IE 启动的时候不加载任何插件