图片展示、图片自适应解决方案
导读
我们在日常开发中会遇到展示图片的问题,图片拉伸、图片残缺、有空白、大小不一致都是问题
所以我们如何更好得展示图片,就引出我们这篇文章的主题
CSS 解决方案
background-size
🐷background-size: contain;
💌 background-size:contain;等比缩放,按照某一边来覆盖显示区域的,若区域大于图片的比
例,会有白边,图片不会变形
<div class="img_box">
</div>
<script>
</script>
<style>
.img_box {
width: 100px;
height: 100px;
background-image: url('./1.jpg');
background-size: contain;
}
</style>
🐥就是说,其实这种也是不是很好用的,就相当于把某一边宽度为100%,但是另一边就按照比例,就很容易造成有白边(我这里加了个底色)
🐷background-size:100%;
💌 background-size:100%;相当于background-size:100% auto的写法。
💌 background-size:100% 100%;这种方式设置完背景图片的大小后,会完全铺满整个盒子,
💌 background-size:100%;这种方式设置的背景图片的大小,x轴会和盒子一样的宽,但是y轴由于默
认为 auto
🐷background-size:cover;
这中是比较好的方案
首先会充满盒子,不变形,但是会把多余的进行裁剪
<div class="img_box">
</div>
<script>
</script>
<style>
.img_box {
width: 100px;
height: 100px;
background-color: red;
background-image: url('./1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
</style>
object-fit
这个属性,我们主要讨论下面这种情况
<div class="img_box">
<img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
.img_box {
width: 200px;
height: 100px;
background-color: red;
}
img{
width: 100%;
height: 100%;
}
</style>
可以看到会产生拉伸
🐷object-fit: contain;
🐥可以看出和上面的background-size:contain;特点一样,会按照某一边,不会拉伸,但是比例不匹配会产生白边(我这里依然是红边)
<div class="img_box">
<img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
.img_box {
width: 200px;
height: 100px;
background-color: red;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
🐷object-fit: cover;
🐥可以看出,不会拉伸,但是会对图片进行剪切
<div class="img_box">
<img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
.img_box {
width: 200px;
height: 100px;
background-color: red;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
进而探讨图片跟随屏幕大小自适应的问题
我们设想一个问题,就是页面一个图片,咱们想把图片自适应屏幕宽度,进行完整更好的展示
<div class="img_box">
<img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
.img_box {
width: 1000px;
height: 800px;
background-color: red;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
🐥拉伸边框会出现这样,明显不是咱们想要的
只设宽度方案,优化方案
我们如下代码,只设置宽度,虽然看上去不错,但是依然是不完善的
<div class="img_box">
<img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
.img_box {
width: 100%;
background-color: red;
}
img{
width: 100%;
}
</style>
🐥其实这里我们可以进而去控制img元素的父盒子,去控制父盒子的宽度自适应,可以设置display:inline-block;简单的控制父元素宽度(宽度也是随内容变化的,而且图片默认样式恰巧也表现为inline-block的效果),可以看下图的变化,就很nice
<div class="img_box">
<img src="./1.png" alt="">
</div>
<div class="img_box">
<img src="./2.png" alt="">
</div>
<script>
</script>
<style>
.img_box {
background-color: red;
display: inline-block;
}
img {
width: 100%;
vertical-align: middle;
}
</style>
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhacaai
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13