img标签实现和背景图一样的显示效果——object-fit和object-positon
不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用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的更多相关文章
- IE6下 input 背景图滚动问题及标签规范
ie6 背景图滚动问题: <title>ie6下input背景图滚动问题</title> <style> .box{ height:20px; width:300p ...
- a标签的背景图在ie8下显示问题
今天遇到个小问题,纠结了很久,分享下 a标签添加背景图,需要给a添加display:block样式 但是在ie8下还是不能显示背景图,开始以为是由于a标签为空造成的,试了下添加内容也没用,后来注意到一 ...
- a标签的背景图在ie8下不显示的问题
突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...
- angular4模块中标签添加背景图
一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...
- 页面中图片以背景图形式展示好还是以img标签形式展示
img和background-image的异同: img是网页结构层面上的标签,页面中多一个img标签就会多一次http请求,且当我们浏览页面时,img标签作为网页结构的一部分,会在浏览器加载结构的过 ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- 齐博x1背景图如何设置标签
背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别
html css <div class="register-wrapper"> <div class="register"> &l ...
随机推荐
- PHP使用文件流下载文件方法(附:解决下载文件内容乱码问题)
1.flush - 刷新输出缓冲 2.ob_clean - 清空(擦掉)输出缓冲区 此函数用来丢弃输出缓冲区中的内容. 此函数不会销毁输出缓冲区,而像 ob_end_clean() 函数会销毁输出缓冲 ...
- 使用 webpack + react + redux + es6 开发组件化前端项目
因为最近在工作中尝试了 webpack.react.redux.es6 技术栈,所以总结出了一套 boilerplate,以便下次做项目时可以快速开始,并进行持续优化.对应的项目地址:webpack- ...
- 51 Nod 1008 N的阶乘 mod P【Java大数乱搞】
1008 N的阶乘 mod P 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入N和P(P为质数),求N! Mod P = ? (Mod 就是求模 %) 例如:n ...
- POJ_2769同余问题
Reduced ID Numbers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9310 Accepted: 374 ...
- 如何在VS2017中使用快捷键格式化代码?
1.同时按住Ctrl键+A键,全选代码或要格式化的部分代码: 2.再按住Ctrl键,接着按一下K键,接着按一下F键.(注意:Ctrl键在按后面这2个键的时候一直是按着的,直到F键按完才松开).也就是俗 ...
- [数据分析工具] Pandas 功能介绍(一)
如果你在使用 Pandas(Python Data Analysis Library) 的话,下面介绍的对你一定会有帮助的. 首先我们先介绍一些简单的概念 DataFrame:行列数据,类似 Exce ...
- 从零开始学习前端JAVASCRIPT — 2、JavaScript基础ES5
1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript ...
- Lucene学习笔记2-Lucene的CRUD(V7.1)
在进行CRUD的时候请注意IndexWriterConfig的设置. public class IndexCRUD { "}; private String citys[]={"j ...
- 用Dedecms5.7的arclist标签调用文章内容
arclist标签调用文章内容 首先大家都知道在Dedecms中,list标签是可以调用文章内容的,调用格式就不再此冗述了.从我个人来说,我非常不喜欢用list标签调用,有可能我会尽量使用arclis ...
- python爬虫知乎
在之前写过一篇使用python爬虫爬取电影天堂资源的博客,重点是如何解析页面和提高爬虫的效率.由于电影天堂上的资源获取权限是所有人都一样的,所以不需要进行登录验证操作,写完那篇文章后又花了些时间研究了 ...