Question

在玩我的网站时，我偶然发现了一个有趣的问题。

所以我有一个固定宽度的包含列。在这个我有一个数字（现在两个，不知道是否重要）的一行图像。图像的大小和纵横比未确定且彼此不相等。现在，我希望调整它们的大小，使它们的高度相等，并且它们的组合宽度等于父容器的宽度，同时保持它们的纵横比。并且还相应地调整容器高度。

希望我能说清楚。

我确信它可以用JavaScript或类似的东西，但我主要感兴趣的是如果有一个使用CSS的解决方案。

由于

Answer 1

我认为这是不可能的，即使有可能，也会是我见过的最黑暗的css hack（除了它意味着使用不兼容的CSS）。使用Javascript这样做更容易和更值得推荐。（编辑：对于jQuery解决方案，请参阅：http://jsfiddle.net/martinschaer/aJtdb/）

但是，为了好玩，我做到了这一点：http://jsfiddle.net/martinschaer/cGZrF/

这是你可以用CSS3做的最接近你需要的东西。填充空的垂直空间有一个小间隙，但所有图像都使用CSS调整大小以适合容器。

.container{
    width: 600px;
    margin: 10px;
    background-color: #000;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

.imgwrapper {
    box-flex: 1;
}

img{
    max-width: 100%;
    height: auto;
    display:block;
}

有关与mozila和webkit兼容的完整代码，请参阅jsfiddle（http://jsfiddle.net/martinschaer/cGZrF/）。

编辑：对于jQuery解决方案，请参阅：http://jsfiddle.net/martinschaer/aJtdb/

Answer 2

我对JavaScript还不是很有经验，但我还有一个新成员可以为任何后来者（比如我自己）做出... ...

我注意到在Martin's answer中使用多行提供的JSFiddle压缩图像，所以我想补充一点：

var rows = 0; // set row count for multiple 'imageWrapper' divs

$('.imageWrapper').each(function(){
    rows +=1;
});

然后像这样使用rows：

$('.imageWrapper img').each(function(){
    this.width = $(this).data('width') * (container_width / container_width_temp) * rows - 8;
});

- 8是因为我发现行中的最后一个图像倾向于溢出容器并自行推入一行。

我自己一直在寻找这个问题的完美答案，但这让我更接近了。

CSS（？） - 动态调整大小以填充容器的图像行

2 个答案: