当前位置: 美高梅棋牌 > 软件资讯 > 正文

明天聊聊CSS

时间:2019-12-15 17:15来源:软件资讯
聊聊 CSS3 中的 object-fit 和 object-position 2016/11/22 · CSS ·CSS3 本文作者: 伯乐在线 -TGCode。未经作者许可,禁止转载! 欢迎加入伯乐在线 专栏作者。 最近一直忙于将JavaScript学习的笔记整理

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS · CSS3

本文作者: 伯乐在线 - TGCode 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

  • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
  • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个当然不是我头脑风暴来的,而是引用别人的解释:引用

常见的替换元素有<video>、<object>、<img>、<input type=”image”>、<svg>、<svg:image>和<svg:video>等。

美高梅棋牌,要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill : 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
  • contain : 包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
  • cover : 覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
  • none : 保持可替换元素原尺寸和比例。
  • scale-down : 等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

美高梅棋牌 1

上面的五个例子的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style> <div class="box"> <img src="example-girl.jpg" class="fill" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="contain" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="cover" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="none" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="scale" alt=""> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法:

object-position: <position>

1
object-position: <position>

默认值是50% 50%美高梅游戏官网平台,,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3 Background》)

例如:替换元素位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

美高梅棋牌 2

例如:替换元素相对于左下角10px 10px地方定位

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

美高梅棋牌 3

当然,你也可以使用calc()来定位:

img{   object-fit: contain;   object-position: calc(100% - 10px) calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% - 10px) calc(100% - 10px);
}

效果图:

美高梅棋牌 4

它还支持负数:

img{   object-fit: contain;   object-position: -10px calc(100% - 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% - 10px);
}

效果图:

美高梅棋牌 5

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!

打赏作者

1、CSS是什么

CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。

在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

美高梅棋牌 6 美高梅棋牌 7

1 赞 收藏 评论

2、CSS作用

CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。

关于作者:TGCode

美高梅棋牌 8

路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

美高梅棋牌 9

3、基本样式

  • font-size 字体大小
  • font-size:12px对象文字大小为12px
  • float 浮动
    *Float:left靠左浮动
  • Float:right靠右浮动
  • width 宽度
  • Width:20px 对象宽度20px
  • height 高度
    • Height:20px 对象高度20px
  • margin外边距
  • Margin:1px 2px 3px 4px 对象上距离1px;右为2px;下为3px;左为4px
  • padding内补距
  • Padding:1px 2px 3px 4px 对象内距离边上为1px;右为2px;下为3px;左为4px
  • border边框
  • Border:1px solid #111 对象边框为1px宽黑实线
  • font-family 字体
  • font-family"黑体"; 对象文字字体为黑体
  • font-weight 文字加粗
  • font-weight:bold对象文字被加粗
  • line-height 行高
  • line-height:20px 对象内上下2排文字行高为20px(包括文字自身占用高度)
  • text-decoration 文字装饰(下划线、删除线)
  • text-decoration:underline 对象文字加下划线
  • background 背景属性
  • background:#FFF url(bg.png) repeat-x 0 0对象背景色为白色、背景图片为bg.png按X轴分析重复显示并距离顶部和左为0像素
  • text-align内容左中右对齐

更多样式请 查看CSS手册

4、基本选择器

CSS是一种用于屏幕上渲染htmlxml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。

  • 元素选择器—如果设置 HTML 的样式,选择器通常将是某个html 元素,比如 <p><h1><em><a>,甚至可以是 html 本身:
h1 {color:blue;}
p {color:silver;}
  • 类选择器—为了将类选择器的样式与元素关联,必须将 class指定为一个适当的值
<h1 class="important">This heading is very important.</h1>

.important {color:red;}
  • ** id选择器**—选择器可以为标有特定 id 的 HTML 元素指定特定的样式,选择器以 "#" 来定义
<p id="red">这个段落是红色。</p>

#red {color:red;}

编辑:软件资讯 本文来源:明天聊聊CSS

关键词: