[问题] 关于一个图片排版的问题

楼主: YoyaKazuma (喰)   2016-11-02 23:03:24
这里想请教一个关于图片排版的问题
就是我有三张图片且宽高各自都不同
而我希望把这三张图片摆在同一行
并且塞满版面宽度 , 又刚好每张图片都一样高
举例:
 譬如说整张网页宽度 800px ,就会自动调整三张图片的比例
 最后每张图片的高度会一样,且三张图片的宽度加起来为 800px
( 且当网页宽度调整时每张图片的比例也要能随之自动缩放 )
请问这样有办法只用 CSS 实做吗?
我的理解应该是得用到 JavaScript 才有办法
=
会这样问是因为公司网站包给国外写的 CMS 效能不是很好
所以老板希望尽量不要放 JavaScript 上去 , 常常会卡住...
作者: ymcheung (ymc)   2016-11-02 23:10:00
Flexbox 或 display: table 吧?
作者: youtuuube000 (小孩)   2016-11-02 23:13:00
用float加上div应该也可以(?
作者: wyler (wyler)   2016-11-03 05:36:00
先用ps排一下 抓图片的宽度%数?? 还是这三张可以后台更换的图片呢
作者: xdraculax (首席怪叔叔)   2016-11-03 09:14:00
图片固定的话先设好%数接近,高度再vw+overflow:hide切一点点掉,如果图片能换,只能用 js 了 (js 是能占多少效能 @@)overflow:hide也可以改用背景+cover
作者: Ayukawayen (亚布里艾尔发芽>//<)   2016-11-03 10:56:00
图片固定就先用小画家合成一张然后width:100%结束(?
作者: minm (chenmin)   2016-11-03 11:07:00
Background-size: cover
作者: aceone   2016-11-06 03:34:00
自动高度搭配cover就是 height:100% width:auto
作者: kawaii98 (kawaii98)   2016-11-17 23:46:00
我想到了,可以试看看width:cale(100%/3);

Links booklink

Contact Us: admin [ a t ] ucptt.com