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

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

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

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

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

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

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