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

Question

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

是 400 像素 x 400 像素。 我有 8 张不同尺寸的图片。 我想在第一行放 4 张图像，在最后一行放另外 4 张。 所以每个图像的大小将是 50px x 50px 而且我需要这些图像与原始大小的比例相同。

http://deadwoodfilms.com/jquery/gallery/gallery.html

Answer 1

如果你想保持比例，只强制图像的一个维度，宽度或高度，而不是两者。

Answer 2

如果我理解正确，您可以这样做：

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

这使得所有图像都填充它们的父框，同时保持它们的纵横比。显然有些图像会被裁剪。如果这是你所追求的，就不需要使用 JS 或其他任何东西。

小提琴：http://jsfiddle.net/5HXGf/1/

Answer 3

未来随着 css3 的到来，还有另一种使用背景图片的解决方案：

http://jsfiddle.net/UVk4Z/3/

HTML：

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

CSS：

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 ;
    }

Answer 4

这看起来像是 imagemagick 的工作。

Answer 5

这取决于如何填充框。您可以通过缩小比例来裁剪图像或适合框，以便出现边框。 无论如何，如果可以在服务器上渲染这些图像以满足您的需求，然后交付它们。如果没有......有趣的开始，我想只有 js 可以帮助导致一些计算是必要的：

1。 将图像比率与框比率进行比较，这可以更高或更低，这告诉您将哪个边缘用作变换宽度或高度的领导者。

2。 以相同的比例计算适合的新宽度和高度

3。 将这些值作为 css 属性添加到您的图像中...

裁剪示例： http://jsfiddle.net/gn2NY/7/

HTML：

<div>
  <p>
    <img src="http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg" >
  </p>
  <p>
    <img src="http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg" >
  </p>
  <p>
    <img src="http://www.weltform.at/wp-content/uploads/2010/10/100bp09_035_02_04.jpg" >
  </p>
  <p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/61/Broadway-Plakate.JPG" >    
  </p>
  <p>
    <img src="http://www.wiedenmeier.ch/wordpress/wp-content/uploads/2009/10/lenin_plakate.jpg" >    
  </p>
  <p>
    <img src="http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg" >
  </p>
  <p>
    <img src="http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg" >
  </p>
  <p>
    <img src="http://www.weltform.at/wp-content/uploads/2010/10/100bp09_035_02_04.jpg" >
  </p>
  <p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/61/Broadway-Plakate.JPG" >    
  </p>
  <p>
    <img src="http://www.wiedenmeier.ch/wordpress/wp-content/uploads/2009/10/lenin_plakate.jpg" >    
  </p>

CSS：

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

img{
  position:relative;
}

JS：

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);                    
        }
    }
);