css - CSS (?) - 动态调整大小以填充容器的图像行

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 的经验还不是太丰富，但我有一个补充可以让后来者（比如我自己）...</p>

我注意到在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是因为我发现该行中的最后一个图像往往会溢出容器并自行推入一行。

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