在網頁開發中，經常會遇到需要根據不同屏幕大小顯示不同圖片的情況。這時候，我們可以使用CSS來實現。

首先，我們需要在HTML中加入一張默認圖片：

<code>
<img src="default.jpg" alt="Default Image" id="myImage">
</code>

然后，我們可以使用CSS中的@media標簽來根據不同屏幕大小顯示不同圖片：

<code>
@media screen and (max-width: 600px) {
#myImage {
content: url("small.jpg");
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
#myImage {
content: url("medium.jpg");
}
}
@media screen and (min-width: 1025px) {
#myImage {
content: url("large.jpg");
}
}
</code>

其中，@media screen 表示只在屏幕上生效；max-width 和 min-width 分別表示屏幕的最大寬度和最小寬度，以此來判斷屏幕大??；content:url("") 表示要顯示的圖片路徑。

上述代碼表示當屏幕寬度小于等于600px時，顯示small.jpg；當屏幕寬度在601px到1024px之間，顯示medium.jpg；當屏幕寬度大于1025px時，顯示large.jpg。

通過以上方法，我們可以根據不同屏幕大小來顯示不同圖片，提高用戶體驗。