css实现图片自适应容器的几种方式(小结)
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
经常有这样一个场景,需要让图片自适应容器的大小。
1、img标签的方式
我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。
1 2 3 4 5 6 7 8 9 10 11 | .div 1 { width : 500px ; height : 400px ; border : 1px solid black ; } .div 1 img { /* width: 100%; height:100%; */ } |
这是正常的佩琪(如果图片比容器大的话,图片会超出容器)
1 2 3 4 5 6 7 8 9 | .div 1 { width : 500px ; height : 400px ; border : 1px solid black ; } .div 1 img { width : 100% ; height : 100% ; } |
这是100%的佩琪
虽然符合了自适应的要求,但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。如果说是单个图片(logo、占位图、等)按设计稿开发就可以了。但经常会遇到接口获取的不规则图片的情况,一般这种时候会将小于容器的话将其水平、垂直居中。
整理一下任务:
图片宽高都小于容器时垂直、水平居中
图片宽高都大于容器时保持宽高比将width或height充满容器
1 2 3 4 5 6 7 8 9 | < div class = 'div1' > < img src = "./peiqi.png" alt = "" > </ div > < div class = 'div1' > < img src = "./peiqi2.png" alt = "" > </ div > < div class = 'div1' > < img src = "./peiqi4.jpeg" alt = "" > </ div > |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .div 1 { width : 500px ; height : 400px ; border : 1px solid black ; display : table-cell ; vertical-align : middle ; } .div 1 img { max-width : 100% ; max-height : 100% ; display : block ; margin : auto ; } |
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
2、背景图的方式
background-size: contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。利用css的 background-size: contain; 属性就能进一步优化图片的宽高都小于容器的情况了。
上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | div { height : 400px ; width : 500px ; border : 1px solid black ; background-repeat : no-repeat ; background- size : contain; background-position : center ; } .div 1 { background-image : url (./peiqi 1 .png); } .div 2 { background-image : url (./peiqi 2 .png); } .div 3 { background-image : url (./peiqi 4 .jpeg); } |
当然最后还得看需求,产品是咋要求的。
到此这篇关于css实现图片自适应容器的几种方式(小结)的文章就介绍到这了,更多相关css图片自适应容器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了CSS将img图片填满父容器div自适应容器大小的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下2020-05-13
- 这篇文章主要介绍了CSS实现宽高等比自适应容器的方法,需要的朋友可以参考下2019-08-09
- 这篇文章主要介绍了css实现图片自适应容器的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2019-02-27
最新评论