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 - 裁剪圖像顯示

回答

相關問題