我是新手想请教如何在不同的装置自动调整图片大小及位置。
我的图片是直立的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