使用css動態調整圖像寬度和高度

Question

我有一個照片庫頁面，顯示不同寬度和高度的圖像。我試圖使用CSS動態顯示所有圖像的寬度和高度統一。

我目前有一切工作，除了動態高度。我手動設置圖像高度，然後在不同的斷點處進行調整。我使用@media頁面寬度來觸發不同的圖像高度。我很好地修剪掉多餘的高度（隱藏）。

@media(max-width: 1300px) 
    { 
    ul.grid-nav li { 
    display: block; 
    margin: 0 0 5px; 
    } 
    ul.grid-nav li a { 
    display: block; 
    } 
    ul.rig { 
    margin-left: 0; 
    } 
    ul.rig li { 
    width: 45% !important; /* over-ride all li styles */ 

    } 

    .img { 

    height: 250px; 
    overflow: hidden; 
    } 
} 

實例Page http://foothillertech.com/student/webdesign/2015/2nd/02_50/classwork/cssPhotoAlbum/dev/index_cssPhoto.html

有誰知道的方式來動態地設置基礎上，rig.li寬度.IMG高度？

謝謝！

Answer 1

有一個涉及相對/絕對定位和填充的技巧。您將填充底部指定爲圖像寬度的百分比。

對於16：9的圖像，請使用此CSS。

ul.rig li .img { 
    overflow: hidden; 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
} 

ul.rig li img { 
    max-width: 100%; 
    position: absolute; 
} 

Answer 2

嘗試以下的jQuery

$(document).ready(function() { 
    $(".img").css("width", $('ul.rig li').width()); 
    $(".img").css("height", $('ul.rig li').height()); 
}); 

希望這會幫助你。