在網(wǎng)頁開發(fā)中，使用 CSS 可以幫助我們實現(xiàn)各種不同的樣式。其中，照片整張顯示是一個常見的需求。下面我們來詳細介紹如何使用 CSS 實現(xiàn)照片整張顯示。

img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
margin: auto;
}

首先，我們需要使用 img 標簽來引入照片。接著，通過使用 display 屬性設(shè)置 img 元素為 block 元素，保證其可以水平居中。然后，使用 max-width 和 max-height 屬性，將照片的寬度和高度都限制在 100% 內(nèi)。同時，設(shè)置 height 和 width 屬性為 auto，保證照片可以按比例縮放。最后，通過設(shè)置 margin 屬性為 auto，讓照片在水平方向上居中。

上面的 CSS 代碼可以在不同的屏幕尺寸下實現(xiàn)照片整張顯示，不會出現(xiàn)變形或者拉伸的情況。但是，當照片尺寸和父元素的寬高比例不一致時，就可能出現(xiàn)留白的情況。解決這個問題的方法是使用 object-fit 屬性。

img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
margin: auto;
object-fit: cover;
}

在上面的代碼基礎(chǔ)上，我們添加了 object-fit 屬性，并將其值設(shè)為 cover。這意味著圖片會按照比例縮放，并將更多的區(qū)域填充圖片。如果照片高度比寬度小，就會在上下留白；如果寬度比高度小，就會在左右留白。

總體來說，使用 CSS 來實現(xiàn)照片整張顯示非常簡單。使用上面的 CSS 代碼，即可輕松實現(xiàn)照片的居中和自適應(yīng)縮放。在實際應(yīng)用中，我們可以根據(jù)具體情況進行適當調(diào)整，來實現(xiàn)更加美觀和實用的效果。