在進行前端開發時，我們常常需要在頁面中添加一些圖片來進行美化。有時，我們希望將一張圖片固定在頁面的右側，這就需要用到css的布局和定位技巧。下面就讓我們來看一下如何使用css實現固定右側顯示圖片。

/* 設置body的樣式，讓其占滿整個頁面 */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: row;
}
/* 設置左側容器的樣式 */
.left-container {
flex: 1; /* 占據整個頁面寬度的1/3 */
background-color: #f0f0f0;
}
/* 設置右側容器的樣式 */
.right-container {
width: 30%; /* 設置寬度為30% */
position: fixed; /* 固定定位 */
top: 50%; /* 置于頁面垂直中心 */
right: 0; /* 靠頁面右側對齊 */
transform: translateY(-50%); /* 進行垂直居中 */
}
/* 設置圖片樣式 */
img {
max-width: 100%; /* 設置圖片最大寬度為100% */
height: auto; /* 根據比例自適應高度 */
}

上面的代碼中，我們首先設置了整個頁面的樣式，讓其占滿整個瀏覽器窗口。然后，我們分別設置了左右兩個容器的樣式，其中右側容器使用了固定定位的技巧，使其始終顯示在頁面的右側，并采用了垂直居中的方式來使圖片居中顯示。最后，我們設置了圖片的最大寬度和自適應高度，使其在縮放時能夠有更好的顯示效果。

總的來說，通過css的布局和定位技巧，我們可以很方便地實現固定右側顯示圖片的效果。如果您也需要在項目中實現此效果，可以參考以上代碼進行實現。當然，具體實現方式也可以根據實際需求進行調整和改進。祝愿大家在前端開發中取得更好的成果！