我對 CSS 完全陌生，現在我正在做一個需要 CSS 知識的專案。所以，如果你能幫助我，請。
我需要化身像藍色突出顯示的正方形 (85px) 一樣大，但無論我如何嘗試，它們仍然很小。
圖片：https : //i.stack.imgur.com/b9Jsq.png。它可以是什么？
.teambox .player .player_data .avatar {
display: flex;
flex-direction: row;
width: 85px;
border: 0;
height: 85px;
align-items: center;
}
.teambox .player .player_data .avatar img {
max-width: 85px;
max-height: 85px;
border: 0
}
uj5u.com熱心網友回復：
如果您不指定它們，影像將呈現其“自然尺寸”。
在這種情況下，我認為您可能希望每個頭像都覆寫 85x85 父 div，而不管其初始尺寸是多少（可能太大，也可能太小）。
值 'cover' 將執行此操作。它適當地擴展（或收縮）影像，并根據需要切斷頂部/底部或側面，使其不會變形，但會填滿整個空間。
您可能會發現初始影像的清晰度太低，因此它們最終變得模糊，在這種情況下，要么獲得更好的清晰度，要么使父 div 變小。
.teambox .player .player_data .avatar {
display: flex;
flex-direction: row;
width: 85px;
border: 0;
height: 85px;
align-items: center;
}
.teambox .player .player_data .avatar img {
width: 85px;
height: 85px;
border: 0;
object-fit: cover;
}<div class="teambox">
<div class="player">
<div class="player_data">
<div class="avatar">
<img src="https://picsum.photos/id/237/300/200">
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
“A Haworth”用戶的回答是正確的，甚至不必玩“object-fit”，只需將“max-height”更改為“height”即可。謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386912.html