CSS：响应式图片排列，按照最小图像的高度裁剪为相同高度

Question

我有两张不同高度的图片在一行内，这个结构是使用Bootstrap网格构建的。

我希望这些图片能够根据视口宽度进行响应式布局，但同时它们必须始终保持相等的高度（否则下面的文本会分散）。

HTML：

   <div class="item container active">
         <h1>Lorem IPSUM</h1>

        <div class="row items-holder">
            <div class="col-xs-6">
                <img />
                <p class="title">SOME TITLE</p>
                <p class="subtitle">Subtitle</p>
            </div>
            <div class="col-xs-6">
                <img/>
                <p class="title">SOME TITLE</p>
                <p class="subtitle">Subtitle</p>
            </div>
        </div>
    </div>

CSS（层叠样式表）：

.items-holder img {    
    width: 100%;    
    height: auto;    
    max-height: 450px;    
    overflow: hidden;    
    display: block;    
}

小提琴：http://jsfiddle.net/64CLd/

类似的问题在这里提到，但是解决方案对我不起作用。

- Very Curious

---

如果不使用JavaScript，真的没有办法根据每个图像的最小高度动态调整每行的高度。但是，如果每个图像都有一个最小高度，您可以将它们限制在该高度。 - JofryHS

你所询问的在逻辑上是不可能的。如果图片要响应屏幕宽度，那么如果你让它们等高，它们显然会失去比例并变形。请重新表述你的问题。 - singe3

Answer 1

这是可能的，但是CSS很糟糕:)下面有一个使用JavaScript完全功能的示例。另一个选项是只能使用JavaScript：http://jsfiddle.net/3y35w/6/

如果删除max-height: 450px，则图像将继续具有响应式尺寸：

var fitImages = function(){
    $("#img1").removeAttr( "style" );
    $("#img2").removeAttr( "style" );
    var changedWidth = $("#img1").height();    
    var h1 = $("#img1").height();
    var h2 = $("#img2").height();
    //it can be done only with height but using double check          ratio of the images is a bit more acurate
    if (changedWidth < OrigWidth) //expand
    {
        //using higher image as refference when maximize
        if (h1 > h2)
        {
          $("#img2").height(h1);  
        }
        else if (h2 > h1)
        {
            $("#img1").height(h2);  
        }
    }
    else
    {
        //using lower image as refference when minimize 
       if (h1 < h2)
        {
          $("#img1").height(h2);  
        }
        else if (h2 < h1)
        {
            $("#img2").height(h1);  
        }
    }
    OrigWidth = changedWidth;
    return 0; }

- SilentTremor

Answer 2

你需要为标题和副标题创建一个新行。 http://jsfiddle.net/64CLd/2/

<div class="col-xs-6 gueas">           
            <div><p class="title">SOME TITLE</p>
                <p class="subtitle">Subtitle</p></div>
            <div><p class="title">SOME TITLE</p>
                <p class="subtitle">Subtitle</p></div>
        </div>

- Grasper

---

这解决了分散的标题问题，谢谢。 - Very Curious

Answer 3

一个解决方案是将img标签包装在

中，并为该div设置一些高度。这将帮助您保持一致的高度，而不受图像高度的影响。

在此基础上，要垂直居中对齐图像，请使用以下CSS：

.items-holder img {
    position:absolute; 
    left:0px; 
    right:0px; 
    top:0px; 
    bottom:0px; 
    margin: auto;

    }

.img_holder{ 
   height: 450px; //This can also be calculated dynamically with javascript as the max height within all images. 
   position:relative; 
   background:#ddd; //Optional 
 }

HTML

<div class="img_holder">
    <img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xpf1/t1.0-9/10380889_10204383083927507_6950941830183040199_n.jpg" alt="" />
</div>

演示

- karan3112