這似乎是一個簡單的問題，但我在尋找解決方案時遇到了一些麻煩。我的頁面上有卡片，我只是希望影像（在 div 內的 img 標簽中）填充 div 的背景。頁面的設定方式我希望 div 中的 img 標簽占據整個背景。我知道我可以在 css 檔案中使用背景 img。但我希望每張圖片都不同，并讓它們適合自己的 div。試圖弄清楚如何設計它們來做到這一點。這就是它的樣子，希望我的問題很清楚..
這是卡片和影像的代碼：
<div class="card">
<img src="https://images.unsplash.com/photo-1552465011" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<img src="" alt="text">
<p> Some text here.</p>
</div>
</div>
img {
max-width: 100%;
max-height: 100%;
background-size: cover;
position: relative;
margin: 0;
padding: 0;
object-fit: cover;
}
.container .card{
background: lightgreen;
color: black;
display: flex;
justify-content: center;
align-items: flex-end;
width: 285px;
height: 145px;
margin: 15px;
padding: 0%;
border: 2px solid black;
background-size: cover;
position: relative;
}
uj5u.com熱心網友回復：
您的標記中有兩個<img>標簽。我假設您希望第一個<img>標簽填充包含<div>.
您可以使用object-fit: cover. 還有其他可用的值，object-fit但cover會拉伸影像以使其覆寫容器，但不會更改影像的縱橫比。
然后，您可以將其限制img為容器寬度和高度的 100%。
請注意，如果影像的縱橫比與容器不同，這可能會截斷影像的一部分，因此您還可以使用object-position調整影像與容器的對齊方式。
請參閱下面的這些示例。
h5 {
margin: 8px 0;
}
p {
font-size: 12px;
margin: 8px 0;
}
.container {
display: flex;
}
.card {
width: 285px;
height: 145px;
margin: 15px;
padding: 0%;
border: 2px solid black;
position: relative;
}
.card-image {
object-fit: cover;
object-position: bottom;
height: 100%;
width: 100%;
}
.card-description {
position: absolute;
width: 100%;
bottom: 0;
margin-bottom: 0;
text-align: center;
background-color: rgba(255, 255, 255, 0.2);
color: black;
}<div class="container">
<div class="card">
<img class="card-image" src="http://cdn.wallpapername.com/1920x1080/20190806/5d498ca7ac412.jpg" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<p> Some text here.</p>
</div>
</div>
<div class="card">
<img class="card-image" src="https://static.fanpage.it/wp-content/uploads/sites/22/2020/07/iStock-464788862.jpg" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<p> Some text here.</p>
</div>
</div>
<div class="card">
<img class="card-image" src="https://media.istockphoto.com/photos/three-lovely-puffy-tit-sitting-on-a-branch-in-winter-sunny-park-picture-id865636134?k=6&m=865636134&s=612x612&w=0&h=dAqcmx8ETyzUOpk_g5-4uWLZeTDdt-6Qe9tENCAcj20=" alt="">
<div class="card-description">
<h5>Title of Post</h5>
<p> Some text here.</p>
</div>
</div>
</div>uj5u.com熱心網友回復：
您的代碼在某種程度上是正確的，但我已經修改了您的代碼。檢查這個。
img {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center;
}
.container .card {
background: lightgreen;
color: black;
width: 285px;
height: 145px;
margin: 15px;
padding: 0%;
border: 2px solid black;
position: relative;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
height: 50px;
background-color: rgba(0, 0, 0, .2);
display: flex;
align-content: center;
justify-content: center;
flex-wrap: wrap;
}
.card-heading, .card-content{
width: 100%;
}
.card-description h5,
.card-description p {
margin: 0;
color: #fff;
}
<div class="container">
<div class="card">
<img src="https://images.unsplash.com/photo-1651592753269-7d661e4a9899?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="">
<div class="card-description">
<div class="card-heading">
<h5>Title of Post</h5>
</div>
<div class="card-content">
<p> Some text here.</p>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
你快到了??
通過使用max-width: 100%; max-height: 100%
您將影像限制為采用容器的全寬或全高。
只需洗掉max并使用width: 100% height: 100%
然后object-fit屬性將顯示它的效果。
uj5u.com熱心網友回復：
img{
display:block,
width:100%,
background-size:cover,
background-position:center center
}
or
.card img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471338.html
上一篇：在python中有：'fromPILimportImageTK，Image'，但我也想有'fromexifimportImage'，但它們不能共存