web前端怎么让div大小刚好和图片一样大

在前端开发过程中，我们经常会遇到盒子大小跟图片尺寸不匹配的情况，我们通常会通过以下几种方式来解决。

1.通过采用裁剪图片，根据div盒子设置的宽、高，来更改裁剪图片的尺寸，使图片适配div盒子。

2.设置div的具体宽高，图片宽高分别设置为100%，代码具体如下width:100%height:100%。这种方式，也可以将图片大小填充满盒子。

3.如果图片是网页背景图片，还可以通过设置div盒子内属性background-size为cover，这种方式也可使图片充满盒子。

我们在实际运用中，可以根据不同情况来选择不同图片调整方式。

先给div定义overflow:hidden样式，不是为了剪裁图片，只是为了页面加载的时候，图片不会把div撑开，让页面布局被破坏，然后给所有需要自适应的图片，定义一个相同的name属性，然后在页面onload事件，或者页面最后调用一个脚本，获取全部name属性为你定义的图片，然后循环遍历这些图片，和图片的父对象，然后给图片的width，height属性进行值定义，就OK了

和父对象对比的时候，width和height分开对比，当width和父对象相同的时候，并且height小于等于父对象，只设置width就够了，这样进行的缩放，就是原比例缩放，不然会拉伸失真的，相反，当height和父对象相同的时候，并且width小于等于父对象，只设置height就够了

以上是客户端处理方法，图片如果太大太多的话，对服务器压力比较大，另一种方法就是在用户上传的时候，编写图片程序，进行判断，手动把图片缩小到指定大小，判断方法类似上边那一段，但是你设置width的时候，需要手动计算一下height，因为自己编写的程序，是不会自动保持比例的

具体步骤如下：

1、首先，先在代码中输入position:fixedtop: 0left: 0这样的作用是让整个图片固定在屏幕上。

2、之后，再把背景图片的大小自动适应DIV大小，当图片自动适应时，既可以就进行缩放。

3、输入background-size: cover-webkit-background-size: cover-o-background-size: cover使图片随屏幕大小同步缩放，如果图片太大就会进行缩放。

---