css初学中如何让图片放入铺满整个盒子

         在html初学中我们都会遇到怎么把照片嵌入盒子之中问题，其中解决这问题基本是有两种方式：1.把图片设置为盒子的背景图片。2.直接把照片放在盒子中。

        1.把图片设置为盒子的背景图片，这也是一般首选的方法。所采用的元素是bbackground-image: url(图片路径);--- 背景图片：

        其中我们可以看到页面显示的图片只有原图的一点，这里我们可以采用background-repeat: no-repeat;--- 背景图片不重复， background-position: center;--- 背景图片居中，background-size: cover;--- 背景图片自适应来实现让背景图片铺满盒子（background-position: center;--- 背景图片居中个人可以看情况采用）
            
       这里看到即使设置了自动适应还是高度不够，这里还是可以按百分比设置前面设置矿都后面设置高度

  
   其中这个三个也是可以简写 ：background: url(图片路径) no-repeat center/cover;      
     2.直接把照片放在盒子中，这种方式和设置背景不同，设置背景在盒子里面写字是在背景上显示，而照片直接放盒子里写字的话实在照片外的下一行显示，这里直接img即可：

这里可以看出照片直接大过盒子溢出，解决方式是直接分为两种：1.把盒子大小设置和图片一样大，2.把图片大小设置和盒子一样大。但基本一般是采取第二种方式，以为这样可以为之后需要的需取留下空间：

这两种方法看个人具体需求使采用，但基本都是采用第一种方式设置为背景图可以为之后的在盒子里操作留下更大空间。