不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图:只显示图片中间部分(红框部分)

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

1、背景图显示正方形效果的做法

首先还是从背景图的做法说起,遇到类似的问题,我们大部分人首先想到的是,能用背景图片做的话,就直接用背景图片来做了,至少我是这么想的。那么用背景图的方式是怎么做的,代码还是写一下如下:

<!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>

页面效果如下图:

当然:背景图还可以实现很多其他效果,只需要background-size属性使用不同的值就可以实现不同的效果,例如:cover,contain,这里就不再一一赘述,因为我们重点要说的是关于img标签显示图片的问题。

2、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="data:images/img1.jpg" class="img-1">
<br>
<img src="data:images/img2.jpg" class="img-2">
</body>
</html>

效果如下图:


至此,已经实现了我们开头说的需求。

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

4、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/

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

img标签实现和背景图一样的显示效果——object-fit和object-positon的更多相关文章

  1. IE6下 input 背景图滚动问题及标签规范

    ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...

  2. a标签的背景图在ie8下显示问题

    今天遇到个小问题,纠结了很久,分享下 a标签添加背景图,需要给a添加display:block样式 但是在ie8下还是不能显示背景图,开始以为是由于a标签为空造成的,试了下添加内容也没用,后来注意到一 ...

  3. a标签的背景图在ie8下不显示的问题

    突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...

  4. angular4模块中标签添加背景图

    一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...

  5. 页面中图片以背景图形式展示好还是以img标签形式展示

    img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...

  6. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  7. 齐博x1背景图如何设置标签

    背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...

  8. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  9. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

随机推荐

  1. 循序渐进之Spring AOP(1) - 原理

    AOP全称是Aspect Oriented Programing,通常译为面向切面编程.利用AOP可以对面向对象编程做很好的补充. 用生活中的改装车比喻,工厂用面向对象的方法制造好汽车后,车主往往有些 ...

  2. python递归查找文件目录

    # -*- coding:utf-8 -*- import os allfile = []def get_all_file(path): allfilelist = os.listdir(path) ...

  3. JS 监听浏览器各个标签间的切换

    以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性 ...

  4. Spring框架学习笔记(5)——自动装配

    1.通过bean标签的autowire属性可以实现bean属性的自动装配. 创建一个新的Spring配置文件beans-autowire.xml,这里我们配置了3个bean,Address.Car.P ...

  5. Eclipse安装svn插件的几种方式 转帖....

    Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...

  6. [国嵌攻略][107][Linux进程管理子系统]

    进程与程序 1.程序:存放在磁盘上的一系列代码和数据的可执行映像,是一个静止的实体. 2.进程:是一个执行中的程序,它是一个动态的实体. 进程四要素 1.有一段程序供其执行.这段程序不一定是某个进程所 ...

  7. 详解 Vue 2.4.0 带来的 4 个重大变化

    在这篇文章中,我将跟大家分享4个有突破性新特性. 服务端渲染异步组件 包裹组件内实现属性继承 异步组件支持webpack3 组件渲染后可保留HTML注释 1.服务端渲染异步组件 在vue2.4.0以前 ...

  8. Sqoop介绍

    Sqoop介绍 http://sqoop.apache.org http://sqoop.apache.org/docs/1.4.6/SqoopUserGuide.html   1.什么是Sqoop? ...

  9. 最近公司用到了lombok,感觉很不错的样子,所以上网搜了一些资料,总结了一下用法。

    lombok作用:它提供了简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码,特别是相对于 POJO.缺点是使用lombok虽然能够省去手动创建setter和getter方法的麻烦, ...

  10. Screen命令安装使用教程

    在安装lnmp之前,我们一般先运行一下Screen程序,因为screen好像一个容器一样,把lnmp的安装过程保护了起来.以CentOS中安装lnmp为例,程序下载.编译都需要比较长的时间,如果中途遇 ...