1

幅の異なる複数の画像があり、ボックスに収まるようにサイズを変更し、比率を維持し、画像の見栄えを良くしたいと考えています。

は 400px × 400px です。サイズの異なる8枚の画像があります。最初の行に 4 つの画像、最後の行に他の 4 つの画像が必要です。したがって、各画像のサイズは 50px x 50px になり、これらの画像を元のサイズと同じ比率にする必要があります。

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

4

5 に答える 5

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

私があなたを正しく理解しているなら、あなたは簡単にできる：

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

これにより、縦横比を維持しながら、すべての画像が親ボックスを埋めます。明らかに一部の画像はトリミングされます。これが目的であれば、JS などを使用する必要はありません。

フィドル: http://jsfiddle.net/5HXGf/1/

于 2012-04-26T01:04:51.287 に答える
1

比率を維持したい場合は、幅または高さの両方ではなく、画像の 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 に答える