如何保持响应式图像相同的高度？

Posted 2023-03-06

【中文标题】如何保持响应式图像相同的高度？

【英文标题】：How to keep responsive images same height?

【发布时间】：2015-03-23 20:18:22

【问题描述】：

我有一个正在制作的网页，并且有一排并排的封面照片和个人资料照片。我将它们都放在不同大小的网格中的引导行中。但是，头像总是低于封面照片（它的高度更大）。我如何让他们保持响应，但高度相同？我的最终目标是让它们看起来像一个单一的条带（中间有填充），然后在窗口为移动设备大小时堆叠。

<div class="row">
                    <div class="col-lg-8">
                    <img src="http://placehold.it/851x315" class="img-responsive" >
                    </div>
                    <div class="col-lg-4">
                    <img src="http://placehold.it/200x200" class="img-responsive" >
                    </div>
                </div>

我尝试限制行 div 的高度，将其设置为特定高度，并将引导网格切换为 col-md 或不同比例的 col-sm。非常感谢任何智慧。

【参考方案1】：

以上方法都不适合我，但这确实有效：

HTML

<div class="row cover-row">
<div class="col-sm-8">
    <img src="http://placehold.it/851x315" class="img-responsive" >
</div>
<div class="col-sm-4 profile-wrap">
    <img src="http://placehold.it/200x200" class="img-responsive profile-pic" >
</div>

CSS

.profile-pic 
    width: 100%; /* maintain width/height aspect ratio */
    height: 500px; /*I realized this doesnt seem responsive, but no percentages work for me but it appears fine on mobile*/

【参考方案2】：

您可以使用以下代码。

HTML

<div class="row cover-row">
    <div class="col-sm-8">
        <img src="http://placehold.it/851x315" class="img-responsive" >
    </div>
    <div class="col-sm-4 profile-wrap">
        <img src="http://placehold.it/200x200" class="img-responsive profile-pic" >
    </div>
</div>

CSS

/* Desktop and Tablet Screens */
@media (min-width:768px) 
    .cover-row 
        position: relative;
        min-height: 100px; /* minimum height of cover stripe */
    
    .profile-wrap 
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
    
    .profile-pic 
        width: auto; /* maintain width/height aspect ratio */
        height: 100%;
    

JSFiddle 链接http://jsfiddle.net/feh4ex3p/

【讨论】：

感谢您的回复，但由于某种原因，这对我不起作用。完全复制了您的代码，我完全理解，但由于某种原因，它根本不起作用。个人资料图片仍然低于封面照片

以上代码仅适用于屏幕宽度 768px 及以上。确保您在这样的屏幕中测试了它们。请注意，在我的 JSFiddle 链接中，我使用了 col-xs-8 而我没有使用 @media (min-width:768px)。所以它适用于所有屏幕尺寸。或者，最高封面图像/条纹高于 99 像素。

是的，我从 js fiddle 复制了代码，但仍然无法对齐。在检查元素时，看起来封面照片 div 与个人资料图片的高度相同，但封面照片本身不是。

在给定 CSS 代码之前，您是否调用了 Bootstrap CSS？ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

是的，bootstrap 是第一个导入的样式表，我的自定义样式表（我在其中添加了您的代码）是最后一个/最新的

【参考方案3】：

对它们使用最小高度

试试

img 
min-height:100%

如果这不起作用，请使用固定的最大高度

img 
min-height:4em;

【讨论】：

在我看来，这个解决方案在不同的浏览器上存在问题（设置图像的宽度：自动在 IE 中创建大图像，宽度 100% 会导致在同一行中以不同比例拉伸图像）除非你设置 @图像容器的 987654324@ 到图像宽度/图像高度。这可以通过预处理器或 php 来完成。就像这里 - codepen.io/blimpage/pen/obWdgp