image宽高一致自适应
来源：互联网 发布：sql语句update语句 编辑：程序博客网 时间：2024/06/05 17:00
重点：padding设置百分比使得元素高度自适应与元素宽度保持一致；
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style type="text/css">*{padding: 0;margin: 0;}.image-wrapper{position: relative;width: 100%;height: 0;padding-top: 100%;/*当height=0且写padding-top为100%的时候，元素的高度会等于元素的宽度，并随着宽度的变化而改变*/}.image-wrapper img{position: absolute;top: 0;left: 0;height: 100%;width: 100%;}</style></head><body><div class="image-wrapper"><img src="img/slide1.jpg"/></div></body></html>效果图：
阅读全文
0 0
- image宽高一致自适应
- css image自适应宽高
- css background-image 自适应宽高
- css background-image 自适应宽高
- 实现Ext Grid宽高自适应 实现loading image
- iframe自适应宽高
- 自适应宽高UILable
- 自适应宽高UILable
- 自适应宽高UILable
- 自适应宽高UILable
- UILabel 宽高自适应
- UILabe 自适应宽高
- label 宽高自适应
- Iframe自适应高宽
- iframe 自适应宽高
- label自适应宽高
- iframe宽高自适应
- 宽高自适应
- 前端调用后台接口的几种方式
- boost和c++11创建线程的区别
- Minimum Depth of Binary Tree
- proteus 数码管动态显示问题解决
- 靶面尺寸和镜头焦距配套对应的视场角
- image宽高一致自适应
- 身价突破800亿美元的巴菲特却对比特币不屑一顾，说....
- windows可以ping通linux虚拟机的ip，但是ping不通主机名称
- QT 信号与槽
- JAVA性能调优
- Linux编译内核
- PO BO VO DTO POJO DAO DO这些Java中的概念
- rabbitmq 整合springboot
- FBI树
