將圖像調整爲預設長寬比

-1

我試圖根據屏幕大小調整網頁上的圖像網格，無論是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(); 
    }); 
});

來源

2016-11-01 chill8888

由於您不需要溢出，只需將圖像放入尺寸爲1：1.5的div內，並將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>

來源

2016-11-01 06:29:50

這工作幾乎完美。但圖像從頂部邊緣對齊，並切斷底部的y溢出。我怎麼能在div中將x和y都放在中心位置？保證金：自動自動不工作，vert/horz也不對齊。 – chill8888

我更新了片段。我希望那是你正在尋找的東西。 –

$(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 
     } 
    }); 
});

來源

2016-11-01 06:30:34

我計算出來通過添加另一數學VAR與單獨的「R」的代碼的末尾以表示比高度。

 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(); 
});

}）;

來源

2016-11-02 07:01:39 chill8888

將圖像調整爲預設長寬比

回答

相關問題