我是新手想請教如何在不同的裝置自動調整圖片大小及位置。
我的圖片是直立的A4紙掃描的，希望寬度可以滿格，但高度又不可以超過營幕，也就是會有
1. 營幕較矮胖 → 圖片高度滿格，左右置中。
2. 營幕較瘦長 → 圖片寬度滿格，上下置中。
請問這個應該怎麼用 CSS 寫出來，感恩 ：)
更新：
網路上有很多做法，其中有一個我試了可以
https://codepen.io/hoisee/pen/BEVavO
謝謝各位熱心的幫忙。
我現在還有一個問題無法解決，我想把所有包含圖片的div用一個div包起來然後設定背景顏色，這個div的寬度要比圖片寬一點點，但一直無法辦到，似乎是因為我的圖片沒有指定大小。請問我該如何才能辦到，謝謝 :)

我的圖片有幾十張依序排列，用手swipe up/down 會自動定位顯示上下的圖片。這樣似乎不適合用 background-image 。

你直接貼codepen吧

你的需求一次說完整,還要swipe的話,可能要加js控制,多張圖和單張圖的狀況不太一樣,是一次多張還是一次單張?

圖片是從上到下依序排列，拉動捲軸可瀏覽全部的圖片，但螢幕一次只看到一張，swipe up 會自動慢慢滑到下一張。swipe 功能我已經用 js 寫好了, 現在就剩圖片如何在不同裝置可以達到我說的效果。謝謝各位的幫忙 ：)

用js抓img長寬去跟螢幕解析長寬互動去決定 height 或 width 哪一項等於螢幕便可

object-fit https://is.gd/ti6CVq

display:table +max-width:00vw 跟max-height:00vh