139-6504-8393

利用CSS样式属性控制让背景图片和IMG图片正常显示不变形

录入编辑:明图网络 | 发布时间:2021年11月05日

合肥网站建设小编想必小伙伴们在建企业网站时在前端页面设计中,都会遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图:只显示图片中间部分(红框部分)我们本次讨论中用到的两张图片的原图就是上面的两张图片(一张宽度大于高度,另一张高度大于宽度)

利用CSS样式属性控制让背景图片和IMG图片正常显示不变形

第一种情况:让背景图片显示正方形的效果而不变形
首先还是从背景图的做法说起,遇到类似的问题,我们大部分人首先想到的是,能用背景图片做的话,就直接用背景图片来做了,至少我是这么想的。那么用背景图的方式是怎么做的,代码还是写一下如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景图的做法</title>
    <style>
        .bg1 {
            width: 200px;
            height: 200px;
            background: url("images/pic1.jpg") center;
            background-size: contain;
        }
        .bg2 {
            width: 200px;
            height: 200px;
            background: url("images/pic2.jpg") center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景图的做法</h3>
    <div class="bg1"></div> <div class="bg2"></div>
</body>
</html>

最终的显示效果如下:

利用CSS样式属性控制让背景图片和IMG图片正常显示不变形

此种方法要用到background-size这个属性,background-size 属性规定背景图像的尺寸。
background-size: cover;
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size: contain;
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
第二情况:img标签显示图片的正方形效果

首先、也是需要设置img标签的宽度和高度是一致的,另外需要用到一个关键的css属性: object-fit:cover; 下面还是直接贴出代码:

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

最终的显示效果如下图:

利用CSS样式属性控制让背景图片和IMG图片正常显示不变形

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属性的不同值,效果图如下:

利用CSS样式属性控制让背景图片和IMG图片正常显示不变形

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

上一篇:CSS 常见问题和解决方案
下一篇:css 中!important的用法及作用(转发)
热门服务和内容
  • 明图微信公众号

    微信公众号

  • 合肥小程序制作

    客服微信号

  • 业务咨询 139-6504-8393

    (7*14小时)8:30-22:30 贴心服务

    合肥市蜀山区长江西路669号拓基城市广场B座11层

    在线咨询
    免责声明:本网站部分数据采集自网络,如权利人发现存在信息侵权,请及时与本站联系,我们第一时间处理。 COPYRIGHT © 合肥明图网络科技有限公司 ALL RIGHTS RESERVED 备案编号: 皖ICP备14002487号-3 关于明图 |