求同一行并列显示三张图片占满100%页面宽度

[mywmshow]

-------------



三张图片要在同一行显示，图片大小不等，但显示出来的三张图片都必须高度=宽度=33%，求大神给个代码，万分感谢！


-------------

[纤柰]

@zc_1994 根据你的代码我终于实现自适应浏览器，感谢

[zc_1994]

<div class="container clearfix"> <div class="img-lists"> <img/> </div> <div class="img-lists"> <img/> </div> <div class="img-lists"> <img/> </div> </div> <style type="text/css"> .container{ width: 100%; } .img-lists{ float: left; width: 33%; height: 33%; } .img-lists img{ width: 100%; height: 100%; display: block; } .clearfix:after{ content:''; display: block; clear: both; height: 0; visibility: hidden; } </style> 不知道这样能不能满足你的需求

[mywmshow]

你好，感谢你的代码，试了下，代码还有改进的地方，就是img高度貌似是图片固定高度，不是和宽度一样的33%

[mywmshow]

上面叙述有误：
测试结果是img显示高度是页面高度的33%，不是和宽度的33%，求大神改进，感谢！

[zc_1994]

<script> var height=document.body.clientHeight； var div=document.querySeletor('.img-lists'); div.style.heigth=height; </script> 如果是页面高度就是图片高度的话要用js获取一下的，你可以试试

[mywmshow]

不是要页面高度，是图片高度和宽度一样就行了，也就是图片是正方型显示，图片宽=图片高=页面宽度的33%
你给的代码，图片宽度是33%了，不过高度不是的，望大神修改。感激不进。

[天际的海浪]

可以用vw单位 width: 33vw; height: 33vw;

[風灬雲]

vw是最直接最简单的，1vw就是宽度的1%；
再就是rem布局，需要一段JS设置根元素字体；

((doc,win)=>{
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function(){
                    var clientWidth = docEl.clientWidth;
                    if(!clientWidth) return;
                    docEl.style.fontSize = clientWidth / 375 * 100 + "px";//375 是相对于750的设计图；可以根据具体情况修改；方便开发
                };

            if(!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);//响应页面尺寸变化
            doc.addEventListener('DOMContentLoaded', recalc, false);//响应页面尺寸变化
        })(document,window)

上面的代码相当于把页面的宽度分成了3.75份；相对于750的设计图而言；图上1px=0.005rem,也就是页面宽度的1/750；
在页面head里面加上这段JS代码；样式

*{
            padding:0;
            margin:0;
        }
        html,body{
            height:100%;
            overflow:hidden;
        }
        img{
            float:left;
            width:1.25rem;
            height:1.25rem;
        }

overflow:hidden;这里是因为三张图片的宽度正好是100%,所以防止出现滚动条；或者就是页面本身就有滚动条就不用加；
float:left;是把img转换成块元素并且并排显示；因为行内块元素之间是默认有间距的；如果三个图的宽度都是1/3，一行就放不下了；用vw同样要加上