CSS：根据最小图像切割到相同高度的连续响应图像

Posted 2023-03-06

【中文标题】CSS：根据最小图像切割到相同高度的连续响应图像

【英文标题】：CSS: Responsive images in a row cut to same height according to the smallest image

【发布时间】：2014-09-26 22:09:09

【问题描述】：

我连续有 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/

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

【问题讨论】：

如果不使用javascript，真的没有办法根据每张图片的最小高度动态调整每一行的高度。但是，如果每张图片都有一个最小高度，您可以将它们限制在这个范围内。

你的问题在逻辑上是不可能的，如果它们对屏幕的宽度有响应，那么如果你使它们的高度相等，图像显然会失去比例并失真。请改写您的问题。

【参考方案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; 

【参考方案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>

【讨论】：

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

【参考方案3】：

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

在此之后，使用下面的 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"  />
</div>

DEMO