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

Posted 2023-02-25

【中文标题】以统一大小调整多个图像的大小并保持比例

【英文标题】：Resize multiple images in a uniform size and maintains the ratio

【发布时间】：2012-04-26 00:18:54

【问题描述】：

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

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

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

【参考方案1】：

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

【讨论】：

谢谢，但我有多个不同尺寸的图像，我希望它们的尺寸相同。

@Edesa 是的，例如，您可以强制所有图像具有相同的宽度： img width:50px; 只要您不同时强制高度，它就会保持纵横比。

【参考方案2】：

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

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

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

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

【参考方案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 ;
    

【参考方案4】：

这看起来像是 imagemagick 的工作。

【参考方案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);                    
        
    
);

【讨论】：

除非我误解了这个问题，否则我认为 CSS 中的 img min-width: 100%; min-height: 100% 会起作用。而且工作量要少得多：D