垂直水平居中

object-fit和object-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>等。

object-fill

这个属性决定了替换元素的内容应该如何使用他的宽度和高度来填充其容器。

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

因为scal-down 就是 none和contain之间进行选择，选择的是尺寸比较小的那个 ，所以它是始终能保证替换元素完整显示的，并且它显示的最大尺寸就是图片实际尺寸。

object-position

用来控制替换内容位置
|值|描述|
|--:--|--:--|
|left top|如果仅指定一个关键字，其他值将会是 "center"|
|left center|
|left bottom|
|right top|
|right center|
|right bottom|
|center top|
|center center|
|center bottom||
|x% y%|第一个值是水平位置，第二个值是垂直。左上角是0% 0%，右下角是100% 100%/。如果禁止顶了一个值，其他值将是50%|
|xpos ypos|第一个值是水平位置，第二个值是垂直。左上角是0.单位可以是像素或者其他css单位。如果仅指定了一个值，其他值将是50%。|

未知宽高图片在已知宽高盒子里实现垂直水平居中的方法

    <div class="div">
        <img src="./1198.jpg" alt="">
    </div>
  • 1）利用文本的水平居中属性text-align: center，利用高==行高实现图片垂直居中
.div{
        width: 200px;
        height: 200px;
        line-height: 200px;
        border: 1px solid red;
        text-align: center;
    }
    img{
        display: inline-block;
        vertical-align: middle;
    }
  • 2)利用margin: 0 auto实现图片水平居中
<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" />
</div>
  • 3)利用table实现图片垂直居中
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
	<span style="display: table-cell; vertical-align: middle; "><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></span>
</div>
  • 4)利用绝对定位实现图片垂直居中(图片宽高已知情况)
<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
	<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>
  • 5)移动端可以利用flex布局实现css图片垂直居中
<style type="text/css">
/*web前端开发http://www.51xuediannao.com/*/
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }

        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }

        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>

/* html代码*/

<div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <div class="cell">
	<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
    </div>
</div>

面试经验：未知图片宽高垂直水平居中

第一种：借助span
<style type="text/css">
    .div{
        width: 500px;
        height: 200px;
        text-align: center;
        border: 1px solid red;
    }
    span{
        width: 0;
        height: 100%;
    }
    img,span{
        display: inline-block;
        margin: 0 auto;
		vertical-align: middle;
    }
</style>
<body>
    <div class="div">
        <img src="./1198.jpg" alt="">
        <span></span>
    </div>
</body>
第二种：定位+translate
<style>
	.div{
    position: relative;
    width: 500px;
    height: 200px;
    text-align: center;
    border: 1px solid red;
}
img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
    </style>


<div class="div">
        <img src="./1198.jpg" alt="">
    </div>

第三种：object-fit

<style>
.div{
    width: 500px;
    height: 200px;
    text-align: center;
    border: 1px solid red;
}
img{
    width: 100%;
    height: 100%;
    object-fit: none;
}

 </style>



<div class="div">
        <img src="./1198.jpg" alt="">
    </div>

object-pposition

<style>
	img {
        width: 300px;
        height: 250px;
        border: 1px solid red;
        background-color: silver;
        margin-right: 1em;
        object-fit: none;
    }

    /*#object-position-1的表现和#object-position-2的表现一样*/

    #object-position-2 {
        object-position: 50%;
    }

    #object-position-3 {
        object-position: 10px;
    }

    #object-position-4 {
        object-position: 100% 10%;
    }
</style>

/*html代码*/

<img id="object-position-1" src="./1198.jpg" alt="MDN Logo" />
    <img id="object-position-2" src="./1198.jpg" alt="MDN Logo" />
    <img id="object-position-3" src="./1198.jpg" alt="MDN Logo" />
    <img id="object-position-4" src="./1198.jpg" alt="MDN Logo" />

图如下
Alt text

posted on 2018-04-17 16:49  undefined00  阅读(129)  评论(0)    收藏  举报

导航