1

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

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

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

4

5 回答 5

1

如果我理解正确，您可以简单地执行以下操作：

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

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

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

于 2012-04-26T01:04:51.287 回答
1

未来将与 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 ;
    }
于 2012-05-01T13:54:59.577 回答
1

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

于 2012-04-26T00:31:05.133 回答
0

这看起来像是imagemagick的工作。

于 2012-04-26T00:42:15.320 回答
0

这取决于如何填充盒子。您可以通过缩小比例来裁剪图像或适合框，以便出现边框。无论如何，如果可以在服务器上渲染这些图像以满足您的需求，然后交付它们。如果不是......有趣的开始，我想只有 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);                    
        }
    }
);
于 2012-04-26T00:48:33.040 回答