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

示例页面 http://foothillertech.com/student/webdesign/2015/2nd/02_50/classwork/cssPhotoAlbum/dev/index_cssPhoto.html

有没有人知道根据rig.li宽度动态设置.img高度的方法？

谢谢！

Answer 1

有一个涉及相对/绝对定位和填充的技巧。您可以将padding-bottom指定为图像宽度的百分比。

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

希望这会对你有所帮助。

动态调整图像宽度＆amp;高度使用CSS

2 个答案: