イメージを標準サイズでレンダリングせずに、最小サイズで伸ばすことなく

Question

それぞれ101x155のグリッドでプロファイルイメージをレンダリングする必要があります。

一部の画像は小さすぎます。大きすぎるものもあれば、大きすぎるものもありますが、ほとんどが正しいアスペクト比ではありません。

最小幅と高さ、歪みのないimgを表示するにはどうしたらよいですか？

Answer 1

画像を実際に変更することなく、利用できるオプションがいくつかあります。

img { max-width: 101px max-height: 155px } 

これは、画像が101x155px幅を超えないようにします。完全なアスペクト比ではないので、アスペクト比が完璧でない場合には、画像の両側に空白が残ります。

もう一つの方法は、これは完璧ではないコンテナ

<div><img .../></div> 
div {width: 101px; height: 155px; overflow: hidden} 
img {width: 101px;} /*or do height: 155px)*/ 

でそれらを包むことであろうが、それはあなたに別の結果を提供します。これにより、すべての画像で画像の高さまたは幅が必要になります。

最良の方法は、サイズを変更することですが、私は、我々は常に我々の方法を持っていないことを知って:)

Answer 2

どのようにいくつかのjQueryのでしょうか？あなただけclass="grid-img"と<img>が含まれている場合：

$(".grid-img").each(function(i){ 
    var width = $(this).width(); 
    var height = $(this).height(); 
    var ar = height/width; 
    if(width > 101) { 
     var newWidth = 101; 
     var newHeight = 101 * ar; 
    } else { 
     var newHeight = 155; 
     var newWidth = ar/newHeight; 
    } 
    $(this).height(newHeight); 
    $(this).width(newWidth); 
}); 

これは何をすべきかです：画像の幅が大きすぎる場合には、（縦横比を維持）幅に基づいてサイズを変更。そうでない場合は、高さに基づいてサイズを変更します（再びARを維持します）。