Question

HTML

<section class="rama">
    <ul>
        <li><img src="images/rama_detail.jpg"/></li>
        <li><img src="images/rama_detail2.jpg"/></li>
    </ul>

CSS

section img {
    max-height:500px;
    width:100%;
    height:auto;
    overflow:hidden;
}

所以这就是我的问题。我想动态调整这两个图像的大小。 width:100%; height:auto;非常适合水平图像，但由于width:100%;，垂直图像宽度会延伸。是否有一种简单的方法可以动态调整垂直和水平图像的大小，而不使用两种图像类型的不同类？

谢谢！

Answer 1

我认为您最好的选择是使用jQuery迭代图像，并动态添加相应的类：

小提琴：http://jsfiddle.net/M5Y53/4/

<强> CSS

section img {overflow:hidden;}
section img.landscape {max-width:200px; width:100%; height:auto;}
section img.portrait {max-height:200px; width:auto; height:100%;}

我在子类中拆分了横向和纵向图像的声明，因此其余的声明（在这种情况下只有overflow:hidden;不必为两个子类重复。

JS （jQuery）

$(window).on('load',function(){
    $('section img').each(function(){ //you need to put this inside the window.onload-function (not document.ready), otherwise the image dimensions won't be available yet
        if ($(this).width()/$(this).height() >= 1) {
            $(this).addClass('landscape');
        } else {
            $(this).addClass('portrait');
        }
    });
});

现在，使用jQuery，迭代适合section img - 选择器的每个图像，并动态添加适当的类。要确定图像是横向还是纵向，只需检查宽度/高度是否大于（或等于）为1。

我不确定你想要如何缩放图像，所以我将max-width:200px和max-height:200px放在子类中，但你也可以将它们缩放到它们的父宽度和高度（请参阅.rama ul li的已注释掉的CSS规则。）

调整CSS中的垂直和水平图像大小

1 个答案: