CSS中可以使用object-fit
屬性來控制圖片的大小。object-fit
屬性指定了圖片在容器中的縮放行為,可以設置為contain
、cover
、fill
等,以達到不同的效果。
如果你想要讓一張圖片在另一個圖片中居中顯示,并且保持其原始大小,可以使用以下CSS代碼:
.container { position: relative; width: 300px; height: 200px; } .image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; }
在這個例子中,.container
是包含圖片的容器,.image
是你要在容器中顯示的圖片,通過設置position: absolute;
,圖片可以定位在容器的中心,并且通過transform: translate(-50%, -50%);
來調(diào)整圖片的位置,使其居中。width
和height
屬性指定了圖片的大小。
如果你想要讓圖片在容器中保持其原始大小,可以使用object-fit: contain;
屬性:
.image { object-fit: contain; }
這樣,圖片會在容器中保持其原始大小,并且不會被拉伸或壓縮,希望這個解答對你有幫助!