使具有不同纵横比的响应图像具有相同的高度 [英] Making responsive images with different aspect ratios the same height

问题描述

我正在尝试一种方法，使响应的图像行具有相同的高度，而不管每个图像的纵横比或容器的宽度如何。实际图像文件的高度相同，但宽度不同。问题在于，当容器变小时，在某些宽度处的舍入误差会导致图像的高度为一个像素或两个不同。这是一个小提琴 http://jsfiddle.net/chris_tsongas/vj2rfath/ ，调整结果窗格的大小，您

I'm trying to figure out a way to make a responsive row of images the same height, regardless of the aspect ratio of each image or the width of the container. The actual image files are the same height, but vary in width. The problem is that when the container gets smaller, at certain widths rounding errors cause images to be a pixel or two different in height. Here's a fiddle http://jsfiddle.net/chris_tsongas/vj2rfath/, resize the result pane and you'll see at some widths the images are no longer the same height.

我正在对CMS的内容进行样式设置，因此对标记的控制最小，并具有强制性仅使用CSS而不使用js。我尝试将图像高度设置为100％，但这只是使图像达到其原始大小的100％，而不是容器高度的100％。这是上面链接的小提琴的html和css：

I'm styling content from a CMS so have minimal control over the markup, and have a mandate to use css only rather than js. I tried setting the image height to 100% but that just makes the image 100% of its original size, not 100% of the container height. Here is the html and css from the fiddle linked above:

<div class="table">
    <div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>
</div>

.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
img {
    max-width: 100%;
}

推荐答案

使用flex，是为了

.row {
    display: flex;
    justify-content:space-evenly;
}

img {
    max-width: 100%;
}

<div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>

这篇关于使具有不同纵横比的响应图像具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！