CSS图⽚固定长宽⽐实现⾼度⾃适应
某些场景下图⽚的宽度不固定，为了保证图⽚不失真，需要通过固定长宽⽐的⽅式来动态计算图⽚⾼度
应⽤场景
1. 例如图⽚期望⼤⼩是 460 * 240 ，但真实图⽚可能出现如下情况
1. 图⽚⼤⼩不固定
2. 图⽚可能加载失败
2. 在⼀个通过 panel 展现的列表中，由于浏览器可⼤可⼩，单个项⽬的宽度不固定
3. 如果固定⾼度，会导致图⽚出现⽐例不协调的情况
4. 如果不固定⾼度，会出现如下单个项⽬⾼度不⼀致的情况
解决⽅式
出现上述情况的代码
1. 可以看出为了保证图⽚不失真，同时当浏览器⼤⼩变化时，单个项⽬能跟随⼀起动态变化，项⽬本⾝以及图⽚的容器没有设置硬性⾼
度
<div class="column-item training-item col-md-3"data-id="${training.hexId}">
...
<div class="thumbnail-img">
<img src="${training.thumbnail}"alt="">
</div>
...
</div>
.column-item{
margin-top: 15px;
padding-left: 0;
}
.column-item .thumbnail-img{
border-radius: 5px;
overflow: hidden;
border: 1px solid #eef3ff;
}
.column-item .thumbnail-img img{
width: 100%;
}
解决上述情况的代码
1. 将原本作为 <img/> 展现的图⽚改为⽗容器的背景
2. ⽗容器背景的布局⽅式设置为 background-position: center; 以及 background-size: cover;
3. ⽗容器的 height 设置为 0 ，真实⾼度由 padding-top 填充
1. 由于⾼度为 0 ，如果容器内部还存在其他⼦元素，则需要设置为 position: absolute
2. ⼦元素为 absolute 的话，⽗容器则需要设置为 position: relative
4. 关键点在于 padding-top 的值如何确定
1. 前⾯说过图⽚的⽐例为 460 * 240
2. 那么计算⽐例应该是 100 * 240 / 460 得出 52.17
3. padding-top: 52.17% 则基本可以确保容器撑开的⼤⼩与图⽚正确⽐例⼀致
<div class="column-item training-item col-md-3"data-id="${training.hexId}">
...
<div class="thumbnail-img" ></div>
...
</div>
.column-item{
margin-top: 15px;
padding-left: 0;
}
.column-item .thumbnail-img{
border-radius: 5px;
overflow: hidden;
border: 1px solid #eef3ff;
css布局左边固定右边自适应
position: relative;
height: 0;
padding-top: 52.17%;
background-position: center;
background-size: cover;
}
解决后的效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。