img图片大于容器的解决方法

达到background-size:cover的效果

img{ object-fit:cover;}

需结合宽高一起使用

（可直接看效果3）

---

 

原图

 

html代码：

<div id="img1">
        <img src="img/1.jpg" alt=" "/>
</div>

css代码1：

<style>
  #img1{
            width:400px;
            height:400px;
            overflow:hidden;
　　　　}
<style>

效果1：

 

css代码2：

<style>
  #img1{
        width:400px;
        height:400px;
        overflow:hidden;
        }
 img{
　　　　width:100%;
　　　　height;100%;
</style>

 

效果2：

 

css代码3：

<style>
#img1{
         width: 400px;
         height: 400px;
        overflow hidden;
        }    
img{
     width: 100%; 
    height: 100%；
     object-fit：cover;
}
</style>                

效果3：