使用Bootstrap v4的相同高度圖像

我擁有相同高度但寬度不同的圖像。如何以相同的高度連續顯示它們並使其響應。使用Bootstrap v4的相同高度圖像

例如，我想在一行中顯示3個圖像，以便每個圖像具有相同的高度。

<div class="row"> 
    <div class="float-left"> 
    <img src="img1.png" class="??"> 
    </div> 
    <div class="float-left"> 
    <img src="img2.png" class="??"> 
    </div> 
    <div class="float-left"> 
    <img src="img3.png" class="??"> 
    </div> 
</div>

來源

2017-09-16 Max Ivak

，如果你知道做這樣的事情，你可以強制使用CSS圖像的高度：

.float-left img { 
    height:(value)px; 
    width:auto; 
}

來源

2017-09-16 21:32:36

我想也使圖像響應。所以他們會有不同的尺寸不同的高度。 –

所以你希望他們總是留在同一行？並採取這一行的所有空間？ –

是的。取這一行的所有空間，但每幅圖像的最終高度應該相同，但寬度不同。與卡組類似的效果 - https://getbootstrap.com/docs/4.0/components/card/#card-groups。但是我在每塊我想要伸展，但使最終高度相等的圖像內有圖像。 –

選擇一個高度和寬度例如3然後寫<img src="img.png" height="3" width="3">

來源

2017-09-16 21:34:51

半響應式解決

使用媒體查詢的每個屏幕尺寸都有不同的高度。

它沒有完全響應，圖像不會佔用容器的全部寬度。但每個圖像都有相同的高度 - 每個屏幕尺寸都有固定的高度。

HTML（HAML）：

.row.my-list 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img1.png"}/ 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img2.png"}/ 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img3.png"}/

CSS（SASS）：

.my-list{ 
    .card{ 
    border: 0; 
    } 

    img{ 
    @include media-breakpoint-down(sm) { 
     height: 40px; 
    } 

    @include media-breakpoint-up(md) { 
     height: 100px; 
    } 

    } 

}

來源

2017-09-16 22:38:51

使用Bootstrap v4的相同高度圖像

回答

相關問題