固定的div中图片的适配显示

作者: 你正哥来了 | 来源:发表于2017-05-04 14:20 被阅读113次

固定的div中图片的适配显示
div盒子宽高固定，图片正常显示
WKWebView的坑之图片显示不完全
css零碎知识点
HTML5学习小记四
float
插入图片与背景图片的区别
iOS适配暗黑模式-Swift
TypedArray类
css解决图片变形问题

在很多平台的新闻，博客列表中都能见到有图文显示，因为新闻，博客等列表都也许不是平台发布的，无法控制很多图片的大小尺寸，如何在杂乱无章的图片尺寸中让列表的图片看起来整洁呢？如下情况：

---文章列表---

WeChat_1493876450.jpeg

---文章详情---

WeChat_1493876463.jpeg

看出些什么来了吗？列表的图片和详情的图片大小是不一样的；

下面是我的一种实现方法和网络中的一种实现方式的比较，之前都是总感觉网络中的某些方式不太准确，我视乎也觉得我的方式还不太准确吧。希望大家有好的方法能交流。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .imgcontent{
            width: 190px;
            height: 100px;
            overflow: hidden;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript" src="./jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function getImageWidth(url,callback){
            var img = new Image();
            img.src = url;
            
            // 如果图片被缓存，则直接返回缓存数据
            if(img.complete){
                callback(img.width, img.height);
            }else{
                    // 完全加载完毕的事件
                img.onload = function(){
                callback(img.width, img.height);
                }
            }
        }
        $(document).ready(function() {
            var img=$(".imgcontent img");
            var imgWith=img.width();//图片的实际高度
            var imgHeight=img.height();//图片的实际高度
            var imgSrc = img.attr("src");
            getImageWidth(imgSrc,function(w,h){
                imgWith=w;
                imgHeight=h;
            var parentWidth=parseInt(img.parent().width());//父视图宽度
            var parentHeight=parseInt(img.parent().height());//父视图高度
            var imgRotio=imgWith/imgHeight;
            var parentRotio=parentWidth/parentHeight;
            if (imgRotio>parentRotio) {//宽图片
                var heightRotio=imgHeight/parentHeight;//宽的比例
                var width02=parentWidth/parentWidth;//求高
                img.css({"height":parentHeight+"px","margin-left":(parseInt(parentWidth)-width02)/2+"px"});
            }else{//高图片
                var widthRotio=imgWith/parentWidth;//宽的比例
                var imgHeight02=imgHeight/widthRotio;//求高
                img.css({"width":parentWidth+"px","height":imgHeight02+"px","margin-top":(parseInt(parentHeight)-imgHeight02)/2+"px"});
            }
            });
            
        });
    </script>
</head>
<body>
<h2>这是原图大小</h2>
<img src="./me.jpg" style="vertical-align: middle;"
       />
<h2>我的方式</h2>
<div class="imgcontent">
      <img src="./me.jpg" style="vertical-align: middle;"
       />
</div>
<h2>网络方式一</h2>
<div style="width: 190px; height: 100px; overflow: hidden;">
    <a href="">
      <img src="./me.jpg"  style="vertical-align: middle;"
       onload="this.style.marginTop = (parseInt(this.parentNode.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.parentNode.style.width) - this.width) /2 + 'px'" />
       </a>
</div>
</body>
</html>

效果如下：