如何使用CSS在鼠标悬停时缩放图像？

lo8azlld 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(122)

我只是想放大图片。我需要自动给出我的产品列表的高度，因为它没有响应，但当我这样做时容器会向下伸展，我该如何避免这种情况呢？

.zoom-img {
  width: 300px;
  height:auto;
  overflow: hidden;
}

.zoom-img  img {
  width: 100%;
  transition: all .3s ease-in-out;
}

.zoom-img img:hover   {
  transform: scale(1.2);
}

<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

我的悬停图像

css

来源：https://stackoverflow.com/questions/69491728/how-to-zoom-an-image-on-mouse-hover-using-css

2条答案

按热度按时间

yacmzcpb1#

使用object-fit属性。
我使所有的图像有1：1的长宽比。

.zoom-img {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.zoom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease;
}

.zoom-img img:hover {
  transform: scale(1.2);
}

<div class="zoom-img">
  <img src="https://www.arthenos.com/wp-content/uploads/2017/08/Manzara_fotografciligi_2-1200x900.jpg" alt="This zooms-in really well and smooth">
</div>

或者也使用aspect-ratio属性。
一个二个一个一个

赞(0）回复(0）举报 2023-02-06

kx1ctssn2#

现在有一个`scale`属性，让我们可以在不需要任何其他行的情况下缩放。

悬停时使用此命令：

scale: 1.2;

但身高：auto仍然是一个问题。高度需要以任何方式固定，否则它将总是溢出，使用固定高度或通过aspect-ratio从宽度固定：月/日

赞(0）回复(0）举报 2023-02-06

我来回答

如何使用CSS在鼠标悬停时缩放图像？

2条答案

现在有一个`scale`属性，让我们可以在不需要任何其他行的情况下缩放。

相关问题

热门标签

最新问答

如何使用CSS在鼠标悬停时缩放图像？

2条答案

现在有一个scale属性，让我们可以在不需要任何其他行的情况下缩放。

相关问题

热门标签

最新问答

现在有一个`scale`属性，让我们可以在不需要任何其他行的情况下缩放。