在div中图片等比例缩放,最大边撑满,其余留空方案一使用background

 gtxyzz   2022-07-31 10:32   150 人阅读  0 条评论

首先,准备两个原图:

在div中图片等比例缩放,最大边撑满,其余留空方案一使用background图一宽度为300px

在div中图片等比例缩放,最大边撑满,其余留空方案一使用background图二高度为300px

等比例缩放,最大边撑满,其余留空

<style type="text/css">
  #xxx { width: 任意宽; height: 任意高; background: #f0f0f0; border: 2px solid #4CAF50;}.
    /*等比例缩放,最大边撑满,其余留空*/
    #xxbg2 { width: 100%; height: 100%; background: url('xxx.jpg') center center no-repeat; background-size: contain; }
</style>

完整实例


以上就是在div中图片等比例缩放,最大边撑满,其余留空方案一使用background的详细内容,更多请关注IT运维空间其它相关文章!

本文地址:https://www.94ip.com/post/2758.html
版权声明:本文为原创文章,版权归 gtxyzz 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?