画像をプリセットアスペクト比にリサイズする

Question

3または4列が自動的に決定されるかどうかにかかわらず、画面サイズに従ってウェブページの画像のグリッドのサイズを変更しようとしています。イメージの幅はすべての列で同じですが、高さは可変です。

実際の画像のサイズ/比率にかかわらず、伸びずにオーバーフローをカットするだけで、完全な1：1.5の比率でサイズ変更するには、すべての画像が必要です。私の最初の考えは、 "h"の計算をw * 1.5に変更することでしたが、運はありません。

(function() { 
    var $K = $('#posts').css("position", "relative"); 
    var rsz_i = undefined; 
    var rs z = function() { 
     if (rsz_i != undefined) 
      clearTimeout(rsz_i); 
     rsz_i = setTimeout(real_rsz, 100); 
    }; 
    var first = true; 
    var real_rsz = function() { 
     var C = Math.ceil($("#posts-container").width()/350); 
     var w = Math.ceil($("#posts-container").width()/C); 
     console.log("rsz", C, w); 
     $(".entry").css({ "width": w+"px" }); 
     setTimeout(function() { 
      var col = 0, y = [], h = 0; 
      $(".entry").each(function() { 
       if (!y[col]) 
        y[col] = 0; 
       $(this).css({ 
        "position": "absolute", 
        "left": (col * w)+"px", 
        "top": y[col]+"px" 
       }); 
       y[col] += $(this).height(); 
       h = Math.max(h, y[col]); 
       col += 1; 
       if (col >= C) 
        col = 0; 
      }); 
      $("#posts").css("height", h+"px"); 
      if (first) { 
       first = false; 
       setTimeout(real_rsz, 150); 
      } 
     }, 150); 
    }; 
    $K.imagesLoaded(function() { 
     $(window).on("resize", rsz); 
     rsz(); 
    }); 
}); 

Answer 1

あなただけの1で寸法のdiv要素内の画像を入れて、オーバーフローを必要としないので：1.5の比率と隠しにdiv要素のoverflowプロパティを設定します。また、親のdivの100％を占めるようにイメージの幅を設定します。これにより、画像が伸びないようにします。

div { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-right: 100px; 
 
} 
 
#clipped { 
 
    overflow: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
img { 
 
    position: relative; 
 
    width: 100%; 
 
}

<div> 
 
    <img src="http://www.publicdomainpictures.net/pictures/140000/velka/watch-vector.jpg"> 
 
</div> 
 
<br> 
 
<div id="clipped"> 
 
    <img src="http://www.publicdomainpictures.net/pictures/140000/velka/watch-vector.jpg"> 
 
</div>

Answer 2

$(document).ready(function() { 
    $('.story-small img').each(function() { 
     var maxWidth = 100; // Max width for the image 
     var maxHeight = 100; // Max height for the image 
     var ratio = 0; // Used for aspect ratio 
     var width = $(this).width(); // Current image width 
     var height = $(this).height(); // Current image height 

     // Check if the current width is larger than the max 
     if(width > maxWidth){ 
      ratio = maxWidth/width; // get ratio for scaling image 
      $(this).css("width", maxWidth); // Set new width 
      $(this).css("height", height * ratio); // Scale height based on ratio 
      height = height * ratio; // Reset height to match scaled image 
      width = width * ratio; // Reset width to match scaled image 
     } 

     // Check if current height is larger than max 
     if(height > maxHeight){ 
      ratio = maxHeight/height; // get ratio for scaling image 
      $(this).css("height", maxHeight); // Set new height 
      $(this).css("width", width * ratio); // Scale width based on ratio 
      width = width * ratio; // Reset width to match scaled image 
      height = height * ratio; // Reset height to match scaled image 
     } 
    }); 
}); 

Answer 3

Iはコードの終わりに比率の高さを表すために別個の「R」と、別の数学VARを追加することによってそれを考え出しました。

 var w = Math.ceil($("#posts-container").width()/C); 
    console.log("rsz", r); 
    $(".entry").css({ "height": (r*1.5)+"px" }); 
}; 
$K.imagesLoaded(function() { 
    $(window).on("resize", rsz); 
    rsz(); 
}); 

}）;