Javascript 以统一的大小调整多个图像的大小并保持比例

我有多个不同大小的图像，我想调整它们的大小，以适合一个盒子，我想保持比例，并希望图像仍然看起来不错

这个数字是400px乘以400px。 我有8张不同大小的图片。 我希望在第一行有4个图像，在最后一行有另外4个图像。 所以每个图像的大小是50px乘以50px 我需要这些图像与原始大小的比例相同

---

如果要保持比例，请仅强制图像的一个维度，即宽度或高度，而不是两个维度。

这看起来像是一项工作。

这取决于如何填充框。您可以裁剪图像或缩小尺寸以适应长方体，从而显示边框。 无论如何，如果有可能在服务器上渲染这些图像以满足您的需要，然后交付它们。如果不是。。。。有趣的开始，我想只有js可以帮助，因为一些计算将是必要的：

一,。 将图像比率与框比率进行比较这可以是较高或较低的，这会告诉您将哪个边用作变换宽度或高度的引线

二,。 以相同的比率计算适合的新宽度和高度

三,。 将这些值作为css属性添加到图像中

一个关于croping的例子：

HTML:

JS:

---

如果我理解正确，您只需执行以下操作：

#resizable img {
    min-width: 100%;
    min-height: 100%;
}

这使所有图像在保持纵横比的同时填充其父框。显然，一些图像将被裁剪。如果这就是你想要的，就没有必要使用JS或其他任何东西

---

Fiddle:

css3的未来是另一个使用背景图像的解决方案：

HTML:

---

谢谢，但我有多个不同大小的图像，我希望它们的大小相同。@Edesa是的，例如，您可以强制所有图像具有相同的宽度：img{width:50px；}只要您不同时强制高度，它将保持纵横比。除非我误解了这个问题，我认为

img{min-width:100%；min-height:100%}

在CSS中可以工作，而且工作量要小得多：D

div{
  width:320px;
} 
p{
  position relative;
  display:inline-block;
  float:left;
  overflow: hidden;
  width: 80px;
  height:80px;
}

img{
  position:relative;
}

var targetHeight = 80;
var targetWidth = 80;
var targetRatio = targetWidth/targetHeight;

function resizeByWidth(obj){
    var oldWidth = obj.width;
    var newWidth = targetWidth;

    var oldHeight = obj.height;
    var newHeight = oldHeight/ ( oldWidth/newWidth );


    var strWidth = newWidth +'px';
    var strHeight = newHeight +'px';
    var strTop = - (newHeight - targetHeight) /2;

    $(obj).css({width: strWidth, height: strHeight, top: strTop});
}
function resizeByHeight(obj){

    var oldHeight = obj.height;
    var newHeight = targetHeight;

    var oldWidth = obj.width;
    var newWidth = (oldWidth / (oldHeight/newHeight) );

    var strWidth = newWidth +'px';
    var strHeight = newHeight +'px';
    var strLeft = - (newWidth - targetWidth) /2 ;

    $(obj).css({width: strWidth, height: strHeight, left: strLeft});
    console.log('By Width done');
}

$('img').each(
    function resize(){    
        imgRatio = this.width / this.height;
        if(imgRatio > targetRatio){
            resizeByHeight(this);            
        }
        else{
            resizeByWidth(this);                    
        }
    }
);

#resizable img {
    min-width: 100%;
    min-height: 100%;
}

<div class="first">
</div>
<div class="second">
</div>

div {
    width :76px;
    height:76px;
    overflow:hidden;
    margin: 2px;
    float:left;
}

    .first {
            background-image:url(http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg);
        background-position: center;
        background-size: cover ;
    }
    .second {
            background-image:url(http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg);
        background-position: center;
        background-size: cover ;
    }