作者energizer (A23)
看板Web_Design
标题[请益]让 图片自动调整大小位置的问题
时间Sat Apr 20 05:48:55 2019
我是新手想请教如何在不同的装置自动调整图片大小及位置。
我的图片是直立的A4纸扫描的，希望宽度可以满格，但高度又不可以超过营幕，也就是会有
1. 营幕较矮胖 → 图片高度满格，左右置中。
2. 营幕较瘦长 → 图片宽度满格，上下置中。
请问这个应该怎麽用 CSS 写出来，感恩 ：)
更新：
网路上有很多做法，其中有一个我试了可以
https://codepen.io/hoisee/pen/BEVavO
谢谢各位热心的帮忙。
我现在还有一个问题无法解决，我想把所有包含图片的div用一个div包起来然後设定背景颜色，这个div的宽度要比图片宽一点点，但一直无法办到，似乎是因为我的图片没有指定大小。请问我该如何才能办到，谢谢 :)
-----
Sent from JPTT on my BullittGroupLimited S60.
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.14.144.88
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1555710537.A.CAD.html
2F：→ energizer: 我的图片有几十张依序排列，用手swipe up/down 会自动04/20 07:11
3F：→ energizer: 定位显示上下的图片。这样似乎不适合用 background-ima04/20 07:11
4F：→ energizer: ge 。 04/20 07:11
5F：→ pkro12345: 你直接贴codepen吧 04/20 07:22
6F：→ mackliu: 你的需求一次说完整,还要swipe的话,可能要加js控制, 04/20 09:28
7F：→ mackliu: 多张图和单张图的状况不太一样,是一次多张还是一次单张? 04/20 09:29
8F：→ energizer: 图片是从上到下依序排列，拉动卷轴可浏览全部的图片， 04/20 14:44
9F：→ energizer: 但萤幕一次只看到一张，swipe up 会自动慢慢滑到下一张 04/20 14:44
10F：→ energizer: 。swipe 功能我已经用 js 写好了, 现在就剩图片如何在 04/20 14:44
11F：→ energizer: 不同装置可以达到我说的效果。谢谢各位的帮忙 ：) 04/20 14:44
12F：→ konkonchou: 用js抓img长宽去跟萤幕解析长宽互动 04/20 15:14
13F：→ konkonchou: 去决定 height 或 width 哪一项等於萤幕便可 04/20 15:16
※ 编辑: energizer (218.35.75.245), 04/20/2019 17:41:18
※ 编辑: energizer (218.35.75.245), 04/20/2019 17:54:18
15F：推 foolray: display:table +max-width:00vw 跟max-height:00vh 04/21 07:08