Question

我有多个图片宽度不同的尺寸，我想调整它们以适应一个盒子，我想保持比例，并希望图像看起来仍然很好。

是400px乘400px。我有8个不同大小的图像。我希望第一行有4个图像，最后一行有4个图像。因此每幅图像的尺寸为50px×50px 我需要这些图像的比例与原始尺寸相同。

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

Answer 1

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

Answer 2

未来随着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 3

这看起来像是imagemagick的工作。

Answer 4

这取决于如何填充框。您可以通过缩小来裁剪图像或调整框，以便显示边框。无论如何，如果可以渲染这些图像以满足您在服务器上的需求，那么就交付它们。如果没有....有趣的开始，我想只有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);                    
        }
    }
);

Answer 5

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

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

这使得所有图像都填充其父框，同时保持其纵横比。显然有些图像会被裁剪掉。如果这是您所需要的，则无需使用JS或其他任何东西。

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

调整大小均匀的多个图像并保持比例

5 个答案: