Question

我正在尝试填充我的图像，同时保持纵横比（Aspect to fill），这是它目前的样子（背景颜色是我的div）

这是我的CSS

.img_model{
    height: 100%; 
    width: 100%; 
    object-fit: contain;
}
.square img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.square img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

js code

$('.img_model').loadImages({
  imgLoadedClb: function(){},
  allLoadedClb: function(){},
  imgErrorClb:  function(){},
  noImgClb:     function(){},
  dataAttr:     'src'
});

$(window).load(function(){
 $('.square').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
});

这就是我在java脚本中创建div的方法

while(i<=22)
    {
        if(!document.getElementById('timedrpact'+i))
        {
            var ele = document.createElement("div");
            ele.setAttribute("id","timedrpact"+i);
            ele.setAttribute("class","col-sm-6 col-md-4 box  portfolio-item square");
            ele.setAttribute("style","background-color:"+arr[i]);
            output.appendChild(ele);

            var ele = document.createElement("a");
            ele.setAttribute("id","a"+i);
            ele.setAttribute("class","a_square");
             ele.setAttribute("href","www.google.com");
            ele.setAttribute("target","_self");
            ele.setAttribute("style","text-decorartion:none");
            document.getElementById("timedrpact"+i).appendChild(ele);

            var ele = document.createElement("img");
            ele.setAttribute("id","img"+i);
            ele.setAttribute("class","img_model");
            ele.setAttribute("style","width:100%;height:auto;");
            ele.setAttribute("src","http://luteciamodels.com/wp-content/uploads/2015/09/3_model_77997_3840x2160.jpg");
            document.getElementById("a"+i).appendChild(ele);
        }
        i++;


    }

我期待输出像绿色圆圈中的第一张图片.... 请帮助我

Answer 1

Object-fit: cover将填充容器而不会扭曲图像。

Answer 2

任何版本的IE都不支持

对象适合你，你想要做的是CSS，并将图像作为div的背景并设置背景大小来覆盖。

这是一个很好的教程，介绍如何执行此操作并获得您想要使用的宽高比： http://www.mademyday.de/css-height-equals-width-with-pure-css.html

使用这些CSS属性将获得IE的支持，一直到v8。

Answer 3

如果在加载图像时设置回调，则很容易完成：

function updateImage(domimage,src){
    var tempImg = new Image();
    tempImg.onload = function(){
        var ratio = this.width/this.height;
        domimage.setAttribute("class", ratio < 1 ? "wide" : "tall");
    }
    tempImg.src = src
}

用作：

        var ele = document.createElement("img");
        ele.setAttribute("id","img"+i);
        ele.setAttribute("class","img_model");
        ele.setAttribute("style","width:100%;height:auto;");
        var imagesrc = "http://xxx.jpg";
        ele.setAttribute("src",imagesrc);
        document.getElementById("a"+i).appendChild(ele);
        updateImage(ele,imagesrc)

未经测试。我忘了怎么用香草选择器。使用jquery。真的更简单干净

怎么做方面来填写img标签？

3 个答案: