img标签实现和背景图同样的显示效果——object-fit和object-position

时间 2019-11-25

标签 img 标签实现背景同样显示效果 object fit position 栏目 HTML 繁體版

原文原文链接

不知你们在作前端页面的时候，有没有遇到相似这样的问题：有一个不是正方形的图片，多是宽度大于高度的，也多是高度大于宽度的，而你又并不想用背景图的方式来作，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即以下图：只显示图片中间部分（红框部分）css

下面咱们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先咱们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另外一张高度大于宽度）html

一、背景图显示正方形效果的作法

首先仍是从背景图的作法提及，遇到相似的问题，咱们大部分人首先想到的是，能用背景图片作的话，就直接用背景图片来作了，至少我是这么想的。那么用背景图的方式是怎么作的，代码仍是写一下以下：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图的作法</title>
    <style>
        .bg-img1 {
            width: 200px;
            height: 200px;
            background: url("images/img1.jpg") center;
            background-size: contain;
        }
        .bg-img2 {
            width: 200px;
            height: 200px;
            background: url("images/img2.jpg") center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景图的作法</h3>
    <div class="bg-img1"></div>
    <br>
    <div class="bg-img2"></div>

</body>
</html>

页面效果以下图：
css3

固然：背景图还能够实现不少其余效果，只须要background-size属性使用不一样的值就能够实现不一样的效果，例如：cover，contain，这里就再也不一一赘述，由于咱们重点要说的是关于img标签显示图片的问题。wordpress

二、img标签显示正方形效果的作法

首先、也是须要设置img标签的宽度和高度是一致的，另外须要用到一个关键的css属性——object-fit:cover。下面仍是直接贴出代码:测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签的作法</title>
    <style>
        .img-1 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        .img-2 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<h3>img标签的作法</h3>
<img src="images/img1.jpg" class="img-1">
<br>
<img src="images/img2.jpg" class="img-2">
</body>
</html>

效果以下图：阿里云

至此，已经实现了咱们开头说的需求。url

三、object-fit的其它值

那么object-fit属性还有哪些值呢？
　　object-fit: fill;
　　object-fit: contain;
　　object-fit: cover;
　　object-fit: none;
　　object-fit: scale-down;

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸必定能够在容器里面放得下。所以，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸必定大于容器尺寸，宽度和高度至少有一个和容器一致。所以，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“下降”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

下面咱们来测试一下每个属性值显示的效果，为了更明显的看出区别，咱们换另一张图片。
每一个img标签都设置的 width:200px 和 width:200px，再加上设置的object-fit属性的不一样值，效果图以下：
spa

四、object-position属性

object-position要比object-fit单纯的多，就是控制图片在盒子中显示位置的。默认值是50% 50%，也就是居中效果，因此，不管上一节object-fit值为那般，图片都是水平垂直居中的。所以，下次要实现尺寸大小不固定图片的垂直居中效果，能够试试object-fit.

与background-position相似，object-position的值类型为<position>类型值。也就是说，CSS3的相对坐标设定样式支持的。
这里就再也不代码实验了，本身能够动手试试。

注：目前IE应该还不支持object-fit和object-position属性

本博客根据阅读了张鑫旭的一篇博客后，本身动手实验后写的，张鑫旭的这篇博客地址是：http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/3d

须要购买阿里云产品和服务的，点击此连接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07