图片填满div，真让人头大
Posted Mickeybo101
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片填满div，真让人头大相关的知识，希望对你有一定的参考价值。
家人们，这图片到底怎样才能完全填满div啊，想问度娘结果搜索的问题都乱七八糟的
（怎么那么多问题QAQ），描述问题都描述不来
具体问题如下：图片有自己的分辨率大小，例如宽100px，高100px，将图片添加到div中：
<div class="xx">
<img src="xxx">
</div>
接着用css代码编辑样式的时候，首先设置div的宽高
.xx
width:200px;
height:200px;
当div宽高大于图片的宽高的时候，这样图片就会填不满这个div，会显示在左上角，如何才能让图片填满这个div啊？？？
就不能设置一下图片的大小吗，例如来一个background-image-size这种的，哭惹！
久经尝试，找到了一个解决办法，就是再设置img的样式，宽高都100%显示，代码如下：
.xx img
width:100%;
height:100%;
display:block;
这样不论图片的大小是否大于div的大小，都会被压缩至div大小一致程度（图片小的会被放大）（另外不会裁剪，是压缩）
有大佬能给出更好的解决方案吗，有例子最好了（咱还是个小菜，复杂了看不懂QAQ）！
完毕。
haley解决中文字段名称字数不同时两端对齐的问题
做项目的时候，最恶心的就是字段名称字数不同，比如“姓名”，“公司名”，“手机号码”，类似这样的问题真让人头大。
现在写个jq的方法来解决这个问题。
先上效果图
现在贴代码：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi"> 6 <meta name="Author" content="haley"> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> 10 <title>解决中文字数不同对齐问题</title> 11 </head> 12 <body> 13 <h2> 14 2016年12月9日 haley解决中文字数不同对齐问题 15 </h2> 16 <div style="padding-left:30px;width:290px;"> 17 <p class="nameLs">手机号</p> 18 <p class="nameLs">姓名</p> 19 <p class="nameLs">固定电话</p> 20 <p class="nameLs">中文公司名称</p> 21 <p class="nameLs">邮政编码号</p> 22 <p class="nameLs">一个特殊字段名称</p> 23 <p class="nameLs">又一个特殊字段名称</p> 24 <p class="nameLs">又又一个特殊字段名称</p> 25 </div> 26 <script> 27 (function($){ 28 $.fn.extend({ 29 ‘ls‘:function(){ 30 var arr=[]; 31 $.each(this,function(){ 32 arr.push($(this).html().split(‘‘).length); 33 }); 34 console.log(arr); 35 $.each(this,function(){ 36 var max=Math.max.apply(null, arr); 37 var n=$(this).html().split(‘‘).length; 38 console.log("max:"+max); 39 var ls=(max-n)/(n-1); 40 $(this).css({ 41 ‘letter-spacing‘:ls+‘em‘ 42 }); 43 }); 44 45 } 46 }); 47 })(jQuery); 48 $(‘.nameLs‘).ls(); 49 </script> 50 </body> 51 </html>
基本能满足正常需求。但是还有一点小bug，就是右侧占位比较多，需要调节一下。
以上是关于图片填满div，真让人头大的主要内容，如果未能解决你的问题，请参考以下文章
我如何为我的页面提供一个div，不仅可以显示背景图片，而且可以填充页面的其余部分？
如何实现让两个div填满整个网页，其中一个div的高度是固定的，另一个div的高度随浏览器的变换而变换