css 设置固定宽高的容器中图片不变形

作者: 小悟空大仙人 | 来源:发表于2020-04-30 10:05 被阅读0次

css 设置固定宽高的容器中图片不变形
css解决图片变形问题
canvas开发项目总结
HTML5-canvas小知识
固定比例响应式图片
原生Js实现瀑布流效果
css关于居中的方式
浅析使用attr设置宽高与css设置宽高的区别
div盒子宽高固定，图片正常显示
iOS九宫格布局

试了几个展示效果，最终这两个效果比较理想

1.展示全图片,图片比例不变

<style>
        .imgbox {
            border: 1px solid red;
            position: relative;
            width: 100px;
            height:200px;
            margin-right:100px;
            float: left;
        }
        .imgbox img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
        }
</style>
<body id="body">
    <div class="imgbox">
        <img src="http://mmbiz.qpic.cn/mmbiz_jpg/HjxsSHsv3C7FFH69xQUAS6aGyNzh7sJ39FudiaaumflJRmC3JTscTST4O8LKEStaKicsicsTHk9zPTCYzonjaWhmw/0?wx_fmt=jpeg">
    </div>
</body>

2.居中展示图片,图片大小不变

<style>
        .imgbox2{
            width: 100px;
            height:200px;
            border: 1px solid #000;
            float: left;
        }
        .imgbox2 i{
            display: block;
            width: 100px;
            height: auto;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            padding-bottom: 200px;
            background-color: #fff;
        }
</style>
<body id="body">
    <div class="imgbox2">
        <i style="background-image: url('http://mmbiz.qpic.cn/mmbiz_jpg/HjxsSHsv3C7FFH69xQUAS6aGyNzh7sJ39FudiaaumflJRmC3JTscTST4O8LKEStaKicsicsTHk9zPTCYzonjaWhmw/0?wx_fmt=jpeg');"></i>
    </div>
</body>

效果图