作者YoyaKazuma (喰)
看板Web_Design
标题[问题] 关於一个图片排版的问题
时间Wed Nov 2 23:03:24 2016
这里想请教一个关於图片排版的问题
就是我有三张图片且宽高各自都不同
而我希望把这三张图片摆在同一行
并且塞满版面宽度 , 又刚好每张图片都一样高
举例：
譬如说整张网页宽度 800px ，就会自动调整三张图片的比例
最後每张图片的高度会一样，且三张图片的宽度加起来为 800px
( 且当网页宽度调整时每张图片的比例也要能随之自动缩放 )
请问这样有办法只用 CSS 实做吗？
我的理解应该是得用到 JavaScript 才有办法
=
会这样问是因为公司网站包给国外写的 CMS 效能不是很好
所以老板希望尽量不要放 JavaScript 上去 , 常常会卡住...
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.160.201.23
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1478099007.A.6ED.html
1F：推 ymcheung: Flexbox 或 display: table 吧？ 11/02 23:10
因为有些客户还在用 IE8 所以可能没办法用 flexbox
display:table 之前有想过但是没有想到要怎麽自动调整宽高
2F：推 youtuuube000: 用float加上div应该也可以(? 11/02 23:13
float 的话我想不出来跟图片缩放的关联耶 , 请问可以给个范例吗? @@
3F：→ wyler: 先用ps排一下 抓图片的宽度%数?? 还是这三张可以後台更换 11/03 05:36
4F：→ wyler: 的图片呢 11/03 05:36
5F：→ xdraculax: 图片固定的话先设好%数接近，高度再vw+overflow:hide 11/03 09:14
6F：→ xdraculax: 切一点点掉，如果图片能换，只能用 js 了 (js 是能占多 11/03 09:14
7F：→ xdraculax: 少效能 @@) 11/03 09:14
8F：→ xdraculax: overflow:hide也可以改用背景+cover 11/03 09:20
图片是固定的 , 所以看来先算各自的百分比再依宽度调整似乎是唯一解了...？
9F：推 Ayukawayen: 图片固定就先用小画家合成一张然後width:100%结束(? 11/03 10:56
图片不能修改 , 不然要给 Legal 重审XD
10F：推 minm: Background-size: cover 11/03 11:07
background-size 也是之前有想过但是没有想到要怎麽自动调整高度
※ 编辑: YoyaKazuma (118.163.140.1), 11/03/2016 14:36:53
11F：推 aceone: 自动高度搭配cover就是 height:100% width:auto 11/06 03:34
12F：推 kawaii98: 我想到了，可以试看看width:cale(100%/3); 11/17 23:46