img图片宽高自适应

项目开发中遇到的一个需求:
如果图片大小超出盒子大小,等比例缩放使图片全部显示出来的前提下,使图片的尺寸最大。

<style>
    .div1 {
        width: 300px;
        height: 100px;
        background: red;
    }
    .bg1{
        /* 这种不会失真 */
        max-height: 100%;
        max-width: 100%;
    }
</style>
<div class="div1">
    <img class="bg1" src="img/qt_img/SA_4.png"/>
</div>

max-height(用来设置指定元素的最大高度):这个属性会阻止 height 属性的设置值变得比 max-height 更大。

​ min-height(用来设置指定元素的最小高度):这个属性会阻止 height 属性的设置值变得比 min-height 更小。 当 height 属性设置的高度小于该属性的值时,则 height 属性会失效。

max-height 重载(覆盖掉) height, 但是 min-height 又会重载(覆盖掉) max-height。即min-height 会将 max-height和 height的值都覆盖掉。

max-height、max-width、min-height、min-width没有兼容性问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值