【CSS】img 标签自适应,object-fit 属性
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【CSS】img 标签自适应,object-fit 属性,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2037字,纯文字阅读大概需要3分钟。
内容图文
![【CSS】img 标签自适应,object-fit 属性](/upload/InfoBanner/zyjiaocheng/985/abdbdd2139674fdd994eac9d24b27cfb.jpg)
object-fit:控制图片展示状态
object-fit 一共有五个对应值,分别是:
- fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
- contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此,此参数可能会在容器内留下空白。
- cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致(尺寸小的一致)。因此,此参数可能会让图片部分区域不可见。
- none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
- scale-down: “降低”。就好像依次设置了 none 或 contain, 最终呈现的是尺寸比较小的那个。
注意:scake-down 具有动态属性:当实际图片尺寸大于容器尺寸时,表现为 contain 属性的结果;当实际图片尺寸小于容器尺寸时,表现为 none 属性的结果
原图:
object-position:控制图片展示位置
object-position 属性可以控制图片的展示位置,比如下图有很多留白,如果我们想让最主要的内容展示出来,就可以用这个属性控制图片位置;
附上测试源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.img_class {
width: 300px;
height: 300px;
border: black 1px solid;
background-color: darkgrey;
}
.one_class {
object-fit: fill;
}
.two_class {
object-fit: contain;
object-position: left 0px bottom 100px;
}
.three_class {
object-fit: cover;
}
.four_class {
object-fit: none;
object-position: left 100px bottom 100px;
}
.div_class {
width: 350px;
float: left;
}
.div_class span {
}
</style>
</head>
<body>
<div class="div_class">
<span>未加object-fit属性时</span>
<img class="img_class" src="./img/timg%20(1).jpg" />
</div>
<div class="div_class">
<span>object-fit:fill</span>
<img class="img_class one_class" src="./img/timg%20(1).jpg" />
</div>
<div class="div_class ">
<span>object-fit: contain;</span>
<p>object-position: left 0px bottom 100px;</p>
<img class="img_class two_class" src="./img/timg%20(1).jpg" />
</div>
<div class="div_class">
<span>object-fit: cover;</span>
<img class="img_class three_class" src="./img/timg%20(1).jpg" />
</div>
<div class="div_class">
<span> object-fit: none;</span>
<p>object-position: left 100px bottom 100px;</p>
<img class="img_class four_class" src="./img/timg%20(1).jpg" />
</div>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的【CSS】img 标签自适应,object-fit 属性全部内容,希望文章能够帮你解决【CSS】img 标签自适应,object-fit 属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。