CSS - 裁剪图像显示

我有一个网站，我有一个图像网格。对于每行我有4个图像，具有相同的显示大小。问题是如果我上传的图片比空格分隔的图片大，它会被调整大小。我想要实现的是将图像剪裁而不是调整大小，因此，当我将鼠标悬停时，它会展开并显示图像的一个较大部分，而不仅仅是使其变大。我曾尝试使用：CSS - 裁剪图像显示

hidden:overflow; 
object-fit: cover; 
position: absolute; 
clip: rect(0px,60px,200px,0px);

也尝试设置负边距。

IMAGES（对不起，质量差）

IMAGE我要上传

我得到什么

我需要什么

HTML

<div class="grid"> 
    <div class="img"><img src="..."></div> 
    <div class="img"><img src="..."></div> 
    ... 
</div>

CSS

.grid{ 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
} 

.img{ 
    overflow: hidden; 
    padding: 10px; 
    width: 23%; 
} 

.img img{ 
    width: 100%; 
    height: 100%; 

     -webkit-transition: all 0.5s ease; /* Safari - Chrome */ 
    -moz-transition: all 0.5s ease; /* Firefox */ 
    -ms-transition: all 0.5s ease; /* IE 9 */ 
    -o-transition: all 0.5s ease; /* Opera */ 
    transition: all 0.5s ease; 
} 

.img:hover img { 
    -webkit-transform:scale(1.10); /* Safari - Chrome */ 
    -moz-transform:scale(1.10); /* Firefox */ 
    -ms-transform:scale(1.10); /* IE 9 */ 
    -o-transform:scale(1.10); /* Opera */ 
    transform:scale(1.10); 
}

有反正我能做到这一点？图像的最佳尺寸将是420x420像素，但我不希望更大尺寸的图像。在此先感谢。

来源

2017-02-16 Carlos PT

这是你要找的东西吗？

.grid{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    bacgkround: red; 
 
} 
 

 
.img{ 
 
    overflow: hidden; 
 
    padding: 10px; 
 
    width: 420px; 
 
    height: 420px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.img img{ 
 
    height: 300%; 
 
    margin: 0 auto; 
 

 
     -webkit-transition: all 0.5s ease; /* Safari - Chrome */ 
 
    -moz-transition: all 0.5s ease; /* Firefox */ 
 
    -ms-transition: all 0.5s ease; /* IE 9 */ 
 
    -o-transition: all 0.5s ease; /* Opera */ 
 
    transition: all 0.5s ease; 
 
} 
 

 
.img:hover img { 
 
    -webkit-transform:scale(1.10); /* Safari - Chrome */ 
 
    -moz-transform:scale(1.10); /* Firefox */ 
 
    -ms-transform:scale(1.10); /* IE 9 */ 
 
    -o-transform:scale(1.10); /* Opera */ 
 
    transform:scale(1.10); 
 
}

<div class="grid"> 
 
    <div class="img"><img src="https://i.stack.imgur.com/eKTXu.png"></div> 
 
</div>

来源

2017-02-16 10:07:35

是这个固定我的问题，非常感谢你。 –

您可以使用transform: translate，其中img作用类似background-size: cover

.grid{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.img{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding: 10px; 
 
    width: 23%; 
 
    transition: transform 0.5s; 
 
} 
 

 
.img img{ 
 
    position: relative; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.img:hover{ 
 
    transform: scale(1.1); 
 
    z-index: 1; 
 
}

<div class="grid"> 
 

 
    <div class="img"> 
 
    <img src="https://i.stack.imgur.com/yQsYk.png" alt="some image here" /> 
 
    </div> 
 

 
    <div class="img"> 
 
    <img src="http://placehold.it/200x400" alt="some image here" /> 
 
    </div> 
 

 
</div>

来源

2017-02-16 10:11:52 LGSon

尝试通过背景图片

<div class="grid"> 
    <div class="img"></div> 
    <div class="img"></div> 
</div> 

.grid{ 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
} 

.img { 
    width: 23%; 
    height: 200px; 
    background: url(https://i.stack.imgur.com/eKTXu.png) 50% 50% no-repeat; 
    background-size: cover; 
    margin-right: 20px; 
} 

.img:hover { 
    background-size: 300%; 
}

现场演示 - https://jsfiddle.net/grinmax_/qhgd96dc/

来源

2017-02-16 10:19:32 grinmax

CSS - 裁剪图像显示

回答

相关问题