任何人都可以告訴如何從 css 中“提取”風景影像，無論影像之前的比例是多少？影像不應縮放，而應被裁剪。“新影像”應包含輸入影像的中心。
CSS：
.doesNotWork{
width:50%;
height:50%;
border: 1px solid rgb(34, 23, 187);
/* in my opinion this div should be a square too and display the same content as the other one but a bit bigger to be 50% of the width of the screen*/
}
.worksAsExpected{
width:250px;
height:250px;
border: 1px solid rgb(34, 23, 187);
}
.cover {
width:100%;
height:100%;
border: 1px solid rgb(187, 23, 23);
object-fit: cover;
}
HTML：
<div class="doesNotWork">
<img src="https://www.w3schools.com/w3images/woods.jpg" alt="test" class="cover"/>
</div>
<div class="worksAsExpected">
<img src="https://www.w3schools.com/w3images/woods.jpg" alt="test" class="cover"/>
</div>
我制作了一個準確顯示問題的 Codepen。希望有人能幫我解決這個問題：
https://codepen.io/su-koch/pen/JjrMqYd
uj5u.com熱心網友回復：
給定代碼中的第一個元素的寬度為 50%。這將是父元素的 50%，在這種情況下，body 占據了視口寬度。
同樣的想法也適用于高度。它是父級高度的 50%。它與寬度無關。
如果您希望將兩者鏈接起來，您可以在現代瀏覽器上使用縱橫比。像現在一樣設定寬度 50%，并設定縱橫比：1 / 1；
這會給你一個正方形。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396361.html
上一篇：PHP不透明