我正在創建一個照片庫。
let img = document.createElement('img')
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_(svg).svg/1250px-Wikipedia_logo_(svg).svg.png"
// console.log(alldata[i].links[0].href)
let border = document.createElement('div')
border.appendChild(img)
border.className = 'gallery'
document.body.appendChild(border):root {
--wid: 300px;
}
.gallery{
background: grey;
width: var(--wid);
}
img{
height: 250px;
width: var(--wid);
}
img:hover {
transform: scale(1.5);
}我想觸發一種效果，當用戶將滑鼠懸停在 上時img，它會變大但保持相同的寬度。我曾嘗試使用transform: scale(1.5);or zoom:150%。它們都可以找到，但是它們會使影像的寬度和高度變大。
有沒有辦法可以觸發類似的效果zoom，但不改變影像的寬度和高度？
這是一個照片庫網站，展示了我想要制作的類似效果（當用戶將滑鼠懸停時img，img會放大大約 110%）
感謝您的任何回復！
uj5u.com熱心網友回復：
這相當簡單：您只需設定.gallery隱藏溢位的內容，然后為img元素添加一個簡單的 CSS 過渡。
p/s：您可能希望使用它object-fit來確保最終不會扭曲影像的縱橫比。
:root {
--wid: 300px;
}
.gallery {
background: grey;
width: var(--wid);
overflow: hidden;
}
img {
display: block;
height: 250px;
width: var(--wid);
transition: all .25s ease-in-out;
/* Optional: to avoid skewing of aspect ratio */
object-fit: contain;
}
img:hover {
transform: scale(1.5);
}<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_(svg).svg/1250px-Wikipedia_logo_(svg).svg.png" />
</div>uj5u.com熱心網友回復：
:root {
--wid: 300px;
}
.gallery {
background: grey;
width: var(--wid);
overflow: hidden;
}
img {
display: flex;
height: 250px;
width: var(--wid);
transition: all .50s ease-in-out;
/* Optional: to avoid skewing of aspect ratio */
object-fit: contain;
}
img:hover {
transform: scale(2);
} <div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_(svg).svg/1250px-Wikipedia_logo_(svg).svg.png" />
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411888.html
標籤：
上一篇：漢堡圖示不顯示