商品展示特效

聊聊 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同等相通的。

兼容性:点这里

到此处,那多个属性算是说完了,正是那样轻松。

打赏支持本身写出越来越多好文章,多谢!

打赏笔者

豆蔻年华、水平滚动条 和 垂直滚动条

图片 6

1.1 宗旨技能点
1)求滚动条的尺寸? 2)拖动滚动条,求内容要走多少?
滚动条的尺寸决议于滚动内容(滚动内容越长,滚动条越短);
内容滚动的相距和滚动条走的相距是成倍数关系。
1.2 换算公式
获取滚动条的尺寸:
滚动条的尺寸 / 盒子的尺寸 = 盒子的尺寸 / 内容的长短**
滚动条长度 = ( 盒子的上涨的幅度 / 内容的上涨的幅度) * 盒子的大幅**
拖动滚动条,求内容走的长度:
剧情走的离开 / 滚动条走的离开 =(内容的尺寸 – 盒子的尺寸) / (盒子长度

  • 滚动条的长度)**
    内容走的相距 = (内容的长度 – 盒子的尺寸) / (盒子长度 – 滚动条的尺寸)
    * 滚动条走的相距
HTML结构
<div id="box">
         <ul id="box_content">
             <li><img src="images/img1.jpg" alt="图片 7"></li>
             <li><img src="images/img2.jpg" alt="图片 8"></li>
             <li><img src="images/img3.jpg" alt="图片 9"></li>
             <li><img src="images/img4.jpg" alt="图片 10"></li>
             <li><img src="images/img5.jpg" alt="图片 11"></li>
             <li><img src="images/img6.jpg" alt="图片 12"></li>
             <li><img src="images/img7.jpg" alt="图片 13"></li>
             <li><img src="images/img8.jpg" alt="图片 14"></li>
             <li><img src="images/img1.jpg" alt="图片 15"></li>
             <li><img src="images/img2.jpg" alt="图片 16"></li>
             <li><img src="images/img1.jpg" alt="图片 17"></li>
             <li><img src="images/img2.jpg" alt="图片 18"></li>
             <li><img src="images/img3.jpg" alt="图片 19"></li>
             <li><img src="images/img4.jpg" alt="图片 20"></li>
             <li><img src="images/img5.jpg" alt="图片 21"></li>
             <li><img src="images/img6.jpg" alt="图片 22"></li>
             <li><img src="images/img7.jpg" alt="图片 23"></li>
             <li><img src="images/img8.jpg" alt="图片 24"></li>
             <li><img src="images/img1.jpg" alt="图片 25"></li>
             <li><img src="images/img2.jpg" alt="图片 26"></li>
         </ul>
         <div id="box_bottom">

         </div>
     </div>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        #box{
            width: 900px;
            height: 180px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }

        #box_content{
           width: 2600px;
           height: 130px;
           position: absolute;
           top:10px;
           left:0;
        }

        #box_content li{
            float: left;
        }

        #box_bottom{
            width: 100%;
            height: 25px;
            background-color: #cccccc;

            position: absolute;
            left: 0;
            bottom: 0;
        }

        #progress{
            width: 100%;
            height: 100%;
            background-color: orangered;
            border-radius: 15px;

            position: absolute;
            cursor: pointer;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var box = document.getElementById('box');
        var box_content = document.getElementById('box_content');
        var box_bottom = document.getElementById('box_bottom');
        var progress = document.getElementById('progress');

        // 2. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 滚动内容的宽度) * 盒子的宽度
        var pLength = (box.offsetWidth / box_content.offsetWidth) * box.offsetWidth;
        progress.style.width = pLength + 'px';

        // 3.监听按下事件
        progress.onmousedown = function(event){
            var event = event || window.event;

            // 3.1 获取起始位置
            var startX = event.clientX - progress.offsetLeft;

            // 3.2 移动事件
            document.onmousemove = function(event){
                var event = event || window.event;
                var endX =  event.clientX - startX;

                // 碰撞检测
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - progress.offsetWidth){
                    endX = box.offsetWidth - progress.offsetWidth;
                }

                // 3.3 赋值
                progress.style.left = endX + 'px';

                // 3.4 内容走起来
                // 内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离
                var c_length = (box_content.offsetWidth - box.offsetWidth) /(box.offsetWidth - progress.offsetWidth) * endX;
                box_content.style.left = -c_length + 'px';

                return false;
            };

            // 3.5 松开鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        }
    }
</script>

图片 27

展示图

打赏帮助自个儿写出更加多好小说,多谢!

任选黄金时代种支付格局

图片 28
图片 29

1 赞 收藏
评论

二、内置对象document

  • Document 对象是 Window 对象的一片段,可透过 window.document
    属性对其开展走访

  • Document 对象使大家能够从剧本中对 HTML 页面中的全数因素举行拜访:

document.head(获取尾部)
document.body(获取身体)
document.title (获取标题)
document.documentElement(获取整个html)

  • Document.compatMode:
    BackCompat:规范非常情势关闭
  • 浏览器宽度:document.body.clientWidth

有关作者:TGCode

图片 30

路途虽远,无所畏
个人主页 ·
作者的作品 ·
9 ·
   

图片 31

CSS1Compat:标准十分情势开启

  • 浏览器宽度:document.documentElement.clientWidth

  • BackCompat 对应 quirks mode(诡异格局) , CSS1Compat 对应 strict mode
    (严谨方式) :

前期的浏览器Netscape 4和Explorer
4对css进行深入分析时,并未有固守W3C标准,那时的剖析方法就被大家称为quirks
mode(奇怪方式),但随着W3C的行业内部特别首要,众多的浏览器开端国有国法W3C规范剖判CSS,仿照W3C规范深入深入分析CSS的格局我们誉为strict
mode(严厉情势) 。

三、scroll家族

发表评论

电子邮件地址不会被公开。 必填项已用*标注