在現代網頁設計中，我們經常需要使用圖片來豐富頁面的內容和視覺效果。而其中一種常見的需求就是在移動設備上可以通過手指縮放圖片，以獲取更好的細節和觀感。這時候，我們就可以借助CSS的一些技巧來實現這個效果。

img {
max-width: 100%; /* 控制圖片寬度不超過容器寬度 */
display: block; /* 將圖片轉為塊元素，以便指定寬高和圓角 */
width: 100%; /* 與max-width搭配，確保圖片不會超過容器寬度 */
height: auto; /* 自適應高度，以避免圖片變形或剪裁 */
border-radius: 5px; /* 可選：添加圓角效果 */
}
img:active {
width: 150%; /* 手指按下時，放大圖片到150% */
max-width: max-content; /* 保留原始寬度，以減少抖動 */
border-radius: 0; /* 可選：去除圓角效果 */
}

通過如上的代碼，我們可以實現一個基本的手指放大效果。具體來說：

• 將圖片的寬度設置為100%，可以使圖片填充其容器，并根據容器大小自適應縮放。
• 使用max-width: 100%可以保證圖片不會超出容器寬度，從而避免水平滾動條的出現。
• 將圖片轉換為塊元素，并指定寬高和圓角等樣式，可以進一步控制圖片的樣式和布局。
• 當用戶按下手指時，通過:active偽類選擇器實現圖片的放大效果。將圖片寬度設置為150%，并去除圓角等特效，使圖片盡可能填充整個屏幕。

當然，這只是一個簡單的示例。實際上，我們可以通過JavaScript或者其他工具來增強這種效果，并實現更高級的手勢控制和動畫效果。