我將 Bootstrap 與 Wordpress 下劃線模板集成。
我想用具有相同高度的影像制作一個水平滾動容器。
我堅持這一點，我有可滾動的容器，但影像高度不一樣；
/*for example purposes*/
.example{
background:pink;
}
/*underscores style.css*/
img {
height: auto;
max-width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid overflow-auto border border-dark">
<div class="row flex-row flex-nowrap">
<div class="col-3"><img class="example" width="755" height="523"><br><em>text1</em></div>
<div class="col-3"><img class="example" width="555" height="623"><br><em>text2</em></div>
<div class="col-3"><img class="example" width="455" height="123"><br><em>text3</em></div>
<div class="col-3"><img class="example" width="255" height="323"><br><em>text4</em></div>
<div class="col-3"><img class="example" width="555" height="823"><br><em>text5</em></div>
</div>
</divuj5u.com熱心網友回復：
當你想匹配圖片的大小并且不知道每個圖片的具體大小時，最好使用 css 使它們適合。
object-fit屬性很棒。它可以幫助我們調整或適應其容器的大小。它就像背景影像一樣作業。
它具有不同的屬性，這將取決于您想要做什么。定義容器的大小以使其正確安裝非常重要。
這里有更多關于這個屬性的資訊
有趣的是它有一個屬性來對齊容器內元素的位置，這稱為物件位置
檢查你的風格。定義影像的高度，剩下的就完成了。
img {
height: 250px;
width: 100%;
object-fit: cover;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/429779.html
標籤：css WordPress 图片 引导程序 5 图像缩放