Question

我有一个网站，我有一个图像网格。对于每一行，我有4个图像，它们具有相同的显示尺寸。问题是如果我上传的图像大于空格分隔的图像，它会被调整大小。我想要实现的是将图像裁剪而不是调整大小，所以当我悬停时它会展开并显示图像的更大部分，而不是仅仅使图像更大。我尝试过使用：

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

也尝试设置负边距。

图片（抱歉质量不好）

想要上传的图片

我得到什么

我需要什么

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像素，但我不希望重新定尺寸更大的图片。提前谢谢。

Answer 1

你正在寻找这样的东西吗？

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用transform: translate img的行为，background-size: cover

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试通过背景图片

<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/

CSS - 显示裁剪图像

3 个答案: