CSS：根据最小图像将一行中的响应图像切割成相同的高度

Question

我连续有2张图片，它们的高度不同。 该结构使用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/

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

Answer 1

这是可能的，但CSS糟透了:)这里你有一个完整的功能使用javascript另一个选项你没有但只使用javscript： 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; }

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>

Answer 3

一种解决方案是将img标记包装在div并为div提供一些height 。 这将帮助您保持一致的高度，与图像高度无关。

在此之后，使用下面的css垂直居中对齐图像

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>

DEMO