[分享]css切除图片两边

在进行网页布局时，经常会出现图片不能完全展现或者不适合布局的情况，这种情况下就需要我们使用CSS来进行图片的切除。首先看一下图片被保留的情况： .img{ width: px; } 这时候图片会完整...

在进行网页布局时，经常会出现图片不能完全展现或者不适合布局的情况，这种情况下就需要我们使用CSS来进行图片的切除。

首先看一下图片被保留的情况：

 <img src="example.jpg" class="img">
    
    .img{
        width: ***px;
    } 

这时候图片会完整展示，但是有时候我们的布局并不适合这样放置，或者图片本身不规则，就会出现一些问题。比如说下面这张会把页面撑破的图片：

 <img src="example.jpg" class="img">
    
    .img{
        width: 100%;
    } 

这种情况下，我们就需要使用CSS的技巧来将图片切除：

 <div class="img-container">
        <img src="example.jpg" class="img">
    </div>
    
    .img-container{
        overflow: hidden;
        width: ***px;
        margin: 0 auto;
    }
    
    .img{
        width: 100%;
        display: block;
        margin-left: -100%;
    } 

这个技巧的核心是让图片的左边部分超出容器，并让容器隐藏掉多余部分。所以我们需要在容器的样式中设置overflow:hidden;，这样图片的超出部分就会被隐藏掉。

然后，在图片的样式中，我们使用了margin-left: -100%;，这个负的外边距会将图片的左边部分向左偏移，使得图片的左边部分超出容器。最后需要注意的一点就是，将图片的display属性设置为block，这是因为块状元素才能够有外边距属性。

使用这个技巧时，需要注意对容器进行尺寸和定位的设置，这里的width: ***px;是根据实际情况设置的。