<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒布局-宽度自动分配-图片自适应</title> <style> *{ margin:0; padding:0} #parent { width:100%; background:#999; display:-webkit-box; height:auto; } #parent div { margin:5px; } /*将盒子进行平均分配的主要代码*/ /*.son1{ -webkit-box-flex:1; }*/ /*.son2{ -webkit-box-flex:1; }*/ /*.son3{ -webkit-box-flex:1; }*/ /*.son3{ -webkit-box-flex:3; } */ /*假如此处为3，则此盒子是整个大盒子一块的1/3*/ .son1 img,.son2 img,.son3 img{ width:100%; height: 100%; } .son1,.son2,.son3{ position: relative; -webkit-box-flex:1; } .son1 span,.son2 span,.son3 span{ position: absolute; left: 0; right: 0; bottom: 0; top:0; margin: auto; text-align: center; width: 100%; height: 20px; white-space:nowrap;/*禁止文字自动换行*/ color:#666; } #parent div:hover{ cursor: pointer; } </style> </head> <body> <div id="parent"> <div class="son1"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" id="img1"/> <span>内容区1的文字介绍</span> </div> <div class="son2"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" id="img2"/> <span>内容区2的文字介绍</span> </div> <div class="son3"> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" id="img3"/> <span>内容区3的文字介绍</span> </div> </div> <br/> <div id="parent_div" style="100%;background:#999;display:-webkit-box;/*height:500px;*/"><!--内部不含图片需定义高，将盒子撑起来--> <div class="son1_div" style="position: relative;-webkit-box-flex:1;background: red"> <div class="son1_div_fix" style="background:yellow;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center; 100%;/*margin:-38% 0 0 0;*/"> <h3 style="white-space:nowrap;" id="h3_1">我是第一个定位的盒子</h3> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" style=" 100%;" id="img_fix1"/> </div> </div> <div class="son2_div" style="position: relative;-webkit-box-flex:1;background: green"> <div class="son2_div_fix" style="background:purple;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center; 100%;/*margin:-38% 0 0 0;*/"> <h3 style="white-space:nowrap;" id="h3_2">我是第二个定位的盒子</h3> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" style=" 100%;" id="img_fix2"/> </div> </div> <div class="son3_div" style="position: relative;-webkit-box-flex:1;background: blue"> <div class="son3_div_fix" style="background:pink;position: absolute;left: 0;right: 0;/*bottom: 0;*/top:0;margin: auto;text-align: center; 100%;/*margin:-38% 0 0 0;*/"> <h3 style="white-space:nowrap;" id="h3_3">我是第二个定位的盒子</h3> <img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" alt="" style=" 100%;" id="img_fix3"/> </div> </div> </div> <div id="show_down" style=" 100%;background: yellowgreen;">231231</div> </body> </html> <script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <script> img_1=document.getElementById("img1"); img_1.onclick = function(){ window.open('http://baidu.com','_blank'); } img_2=document.getElementById("img2"); img_2.onclick = function(){ window.open('http://www.sina.com','_blank'); } img_3=document.getElementById("img3"); img_3.onclick = function(){ window.open('http://www.taobao.com','_blank'); } </script> <script> </script> <script> // $(window).load 解决谷歌浏览器的兼容问题 $(window).load(function(){ var width=$(window).width(); var one_img=$("#img_fix1").css("height");//获取三图中 第一张图的高 var h3_1=$("#h3_1").css("height");//获取第一部分文字的高 var two_img=$("#img_fix2").css("height");//获取三图中 第2张图的高 var h3_2=$("#h3_2").css("height");//获取第2部分文字的高 var three_img=$("#img_fix3").css("height");//获取三图中 第3张图的高 var h3_3=$("#h3_3").css("height");//获取第3部分文字的高 if(980<=width<=1920){ $(".son1_div_fix").css("height",one_img+h3_1); $(".son2_div_fix").css("height",two_img+h3_2); $(".son3_div_fix").css("height",three_img+h3_3); $(".son1_div").css("height",one_img+h3_1); $("#parent_div").css("height",one_img+h3_1); } }) $(window).resize(function(){ var width=$(window).width(); var one_img=$("#img_fix1").css("height");//获取三图中 第一张图的高 var h3_1=$("#h3_1").css("height");//获取三图中 第一部分文字的高 var two_img=$("#img_fix2").css("height");//获取三图中 第2张图的高 var h3_2=$("#h3_2").css("height");//获取第2部分文字的高 var three_img=$("#img_fix3").css("height");//获取三图中 第3张图的高 var h3_3=$("#h3_3").css("height");//获取第3部分文字的高 if(980<=width<=1920){ $(".son1_div_fix").css("height",one_img+h3_1); $(".son2_div_fix").css("height",two_img+h3_2); $(".son3_div_fix").css("height",three_img+h3_3); $(".son1_div").css("height",one_img+h3_1); $("#parent_div").css("height",one_img+h3_1); } }) </script>
效果图：
