我有一個div height可以設定的情況。height設定后，其中的影像將height保持div不變。如果width發生變化（來自不同的視口），影像視圖將減小width，但影像不應隨不同的視口縮放。我已經用代表影像出血的圖中的虛線證明了這一點
和應始終相對于影像出血水平和垂直居中div。img
我試過position: relative;了div，position: absolute;但沒有運氣
uj5u.com熱心網友回復：
隱藏影像容器上的溢位并將影像垂直和水平居中，同時保持原始大小。
.img-container {
height: 300px;
overflow: hidden;
position: relative;
}
.img-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
text-align: center;
}<h1>I Am A Beautiful Image</h1>
<div class="img-container">
<img src="https://picsum.photos/id/1039/1920/1200" alt="">
</div>uj5u.com熱心網友回復：
嘗試將影像用作具有特定大小的背景影像。
.foo {
background-image : url("/url.gif");
background-repeat : no-repeat;
background-attachment : fixed; // optional
background-position : center;
background-size : 700px 400px; // width height
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496896.html
上一篇：如何用順風聚焦div標簽？
下一篇：html內的回應式2列網格