img 随div的大小变化

因为屏幕分辨率不同，想实现浏览器中的一个层随浏览器宽度高度的变化而变化，使层始终占浏览器宽度的90%；高度的75%；层中的图片随这个层的变化而变化，相信很多人都在实际的项目中遇到过这个问题，下面是实现这种效果的解决方案：
body { text-align:center;}
html,body { height:100%;}
.div1 { height:75%; width:90%; margin:0 auto; overflow:hidden;}
.div1 img { width:100%; display:block;}

css弹性布局+自动换行

  1. <div class="wrapper" style="margin:10px;border-width: 2px;border-style:solid;" >
  2.   < for={ int i=0;i<8;i++>
  3.       <div class="card"> aa</div>
  4.   </for>
  5. </div>
  7. div.wrapper{
  8.     margin:10px;
  9.     border-style: solid;
  10.     display: flex;     
  11.     flex-wrap: wrap; //flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html }
  12. div.card{
  13. 　　flex:0 0 25% //flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间 https://www.runoob.com/cssref/css3-pr-flex.html
  14. }