我想在瀏覽器視窗中將寬度和高度未知的影像居中，而無需調整大小。如果影像比瀏覽器寬度寬，我希望它經常是這樣，我想裁剪影像而不是調整它的大小。不應該有水平滾動條。
CSS only 解決方案是首選，但 PHP 是可以接受的，JS 不太理想，但仍然受歡迎。使用背景影像并不理想。
這個問題非常相似，如果可以的話，我會回答：調整瀏覽器寬度和封面照片必須保留裁剪影像的中心
這個代碼塊讓我對我嘗試過的有所了解，但可能不是很有幫助：
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);
/*height: 450px;*/
/*
display: table-cell;
vertical-align: middle
*/
/*justify-content: center;*/
/*margin: 0 auto;*/
/*object-fit: cover;*/
}<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'uj5u.com熱心網友回復：
您可以使用我認為您更喜歡的 img 元素。
此代碼段使用您嘗試將其居中的方法之一 - 為了使左/右居中，它將 img 移動到左側作為 div 的中心，然后將其向后移動其寬度的一半。
它不會嘗試垂直居中，因為要求似乎是使 img 高度與橫幅的整個高度相同，但這當然可以根據需要進行更改。
請注意，要停止使用滾動條顯示溢位，正確的設定是溢位：隱藏，而不是給定代碼中的隱藏。
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
}<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360144.html