Css 使不同纵横比的响应图像具有相同的高度_Css_Responsive Design

Css 使不同纵横比的响应图像具有相同的高度

css responsive-design

Css 使不同纵横比的响应图像具有相同的高度,css,responsive-design,Css,Responsive Design,我正试图找出一种方法，使响应的图像行具有相同的高度，而不考虑每个图像的纵横比或容器的宽度。实际图像文件的高度相同，但宽度不同。问题是，当容器变小时，在某些宽度下，舍入误差会导致图像的高度相差一个或两个像素。这里有一个小提琴，调整结果窗格的大小，你会看到在一些宽度的图像不再是相同的高度我正在对CMS中的内容进行样式化，因此对标记的控制最小，并且我有权只使用css而不是js。我尝试将图像高度设置为100%，但这只会使图像达到其原始大小的100%，而不是容器高度的100%。下面是上面链接的fiddl

我正试图找出一种方法，使响应的图像行具有相同的高度，而不考虑每个图像的纵横比或容器的宽度。实际图像文件的高度相同，但宽度不同。问题是，当容器变小时，在某些宽度下，舍入误差会导致图像的高度相差一个或两个像素。这里有一个小提琴，调整结果窗格的大小，你会看到在一些宽度的图像不再是相同的高度

我正在对CMS中的内容进行样式化，因此对标记的控制最小，并且我有权只使用css而不是js。我尝试将图像高度设置为100%，但这只会使图像达到其原始大小的100%，而不是容器高度的100%。下面是上面链接的fiddle中的html和css：

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


.桌子{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}
img{
最大宽度：100%；
}

要设置单元格内图像的样式，并将其约束为单元格大小，因此需要更改：

img { 
  max-width:100%
}

到

您仍然可以对表执行任何操作，但这将使图像保持相同的高度。

要使具有不同纵横比的图像达到相同的高度，可以通过NPM使用开源库引导间隔

npm install uniformimages

或者您可以访问github页面：

https://github.com/chigozieorunta/uniformimages

下面是一个使用“unim”类的示例（您需要jQuery来实现这一点）：

使用flex，它是为这种事情而设计的

.row{
显示器：flex；
对正内容：空间均匀；
}
img{
最大宽度：100%；
}

您可以通过将图像垂直对齐到顶部来减少此问题，但有时在第一张图像的底部仍然会发生这种情况-我尝试了一段时间来解决此问题，但没有找到解决方法solution@retober你的垂直对齐顶部的想法让我想到了这个解决方法。我这样做了，然后在每个单元格下面添加了一个伪元素，以隐藏任何高度差异。不确定我是否应该回答这个问题。很好的解决方案-如果它回答了你的问题，解决了你的问题，那么它就是一个答案。但在Chrome上，我有时仍然会看到一些高度差异。不幸的是，在这种情况下，图像不再响应，而是固定大小（原始高度的一半）。

https://github.com/chigozieorunta/uniformimages

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>