。
.card-img-top {
min-height: 0.1px;
}
img.list-group-img {
width: 100%;
height: auto;
}<! -- Bootstrap-4 -->
<link rel="styleheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap. min. css" integrity="ha384-. MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/span>>
<!-- Body -->
<div class="list-group-item">
<div class=" row">
<div class="col-12 col-md-4 vertical-center-col"/span>>
<img class="img-thumbnail"/span> src="https://via. placeholder.com/800.jpg" alt="">。
</div>/span>
<div class="col-12 col-md-8 mt-2 mt-md-0"/span>>
<strong>/span>EmployeeOne</strong>/span>
</div>/span>
</div>/span>
</div>/span>但寬度和高度屬性沒有任何效果......
那么我怎樣才能確保我的所有圖片以相同的尺寸出現呢？
這是我的css內容：
.card-img-top {
min-height: 0.1px;
}
img.list-group-img {
width: 100%;
height: auto;
}
uj5u.com熱心網友回復：
有幾個選擇，取決于你的圖片是否是一個一致的比例--例如，有些是縱向的，有些是橫向的，有些是方形的？
如果他們都是不同的比例，你最好的辦法是有一個固定尺寸的容器，并使用object-fit為你里面的影像：
.thumbnail-tainer {
width: 200px;
height:200px;
}
img.thumbnail {
width: 100%;
height:100%;
object-fit:封面。
display:block;
}< div class="thumbnail-container">
<img src="https://www.rspcansw.org. au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile.jpg" class="thumbnail" />
</div>/span>uj5u.com熱心網友回復：
這是一個替代方法。我只是使用了css偽基站
span class="hljs-selector-class">.images {
width: 170px;
height: 200px;
position: relative;
}
.images: before {
內容。''/span>;
position: absolute;
background-image: url（'https://www.rspcansw.org.au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile.jpg'）。
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100%;
width: 100%;
}< div class="images" ></div> 另一種沒有css偽類的方法，它也可以用于多張圖片
span class="hljs-selector-class">.images {
width: 170px;
height: 200px;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}<div style="background-image: url( 'https://www.rspcansw. org.au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile。 jpg');" class="images">< /div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309067.html
標籤：