我試圖將一些徽標放在一行中，并且一個 div 包裝每個徽標，問題是當我為所有徽標包裝器提供特定寬度時，Divs 一些變得很小，反之亦然（我知道這是由于Logs {Images}) 但是有什么方法可以讓所有的 logo 看起來都在一個 CSS 屬性上。
我希望我能夠澄清這個問題。
非常感謝任何幫助！
.logos-container{
background: #ddd;
}
.logos-container .client-logo{
width: 120px;
}
.logos-container .client-logo img{
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
使用object-fit讓瀏覽器計算影像資料大小的包含比例：
.client-logo img {
display: block;
width: 100%;
height: 120px;
object-fit: contain;
}
uj5u.com熱心網友回復：
設定高度而不是寬度：
.logos-container{
background: #ddd;
}
.logos-container .client-logo img{
height: 80px;
width: auto;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
只需給影像一個特定的高度。由于徽標的大小不同，我們不能應用相同的寬度，所以讓其為 100%。
.logos-container .client-logo img{
height:50px;
width: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/493200.html
標籤：javascript html css 响应式设计
上一篇：從物件陣列創建新的物件陣列