0

如果我使用的是变换比例，有没有办法使用覆盖来保持对象适合图像的拉伸？这是我的代码

div.category {
    width: 80%;
    height: 150px;
    margin: 20px;
    position: relative;
    overflow: hidden;
}
img {
    width: 100%;
    transition: transform 0.35s;
    object-fit:cover;
}

div.category:hover {
  transform:scalex(1.2)
}

html

<div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
    </div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
    </div>
    <div class="category">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
    </div>
</div>

这是一个解释我的意思的小提琴：

http://jsfiddle.net/n1x5ak2t/

如果图像只是按比例放大以适应新的 div 宽度而不失真，我会很高兴。

4

3 回答 3

1

考虑一个不同的动画。这是一个使用的想法clip-path

div.category {
  width: 80%;
  height: 150px;
  margin: 20px;
  position: relative;
  overflow: hidden;
  transition: 0.35s;
  clip-path:inset(0 10%);
}

img {
  width: 100%;
  object-fit: cover;
  transition: 0.35s;
}

div.category:hover {
  clip-path:inset(0 0%);
}
<div>
  <div class="category">
    <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
  </div>
  <div class="category">
    <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
  </div>
  <div class="category">
    <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
  </div>
</div>

于 2020-09-22T22:12:38.467 回答
0 
div.category:hover img {
  transform:scalex(1.2)
}

https://jsfiddle.net/7d31Ln0f/

于 2020-09-22T22:03:54.867 回答
0

这是一种不同的方法。

div.category {
    width: 80%;
    height: 150px;
    margin: 20px;
    position: relative;
    overflow: hidden;
}
img {
    width: 100%;
    transition: transform 0.35s;
    object-fit: cover;
}

div.category:hover {
  transform:scalex(1.2)
}
div.category:hover img {
  transform:scale(1.2)
}
<div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" />
    </div>
    <div class="category">
        <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" />
    </div>
    <div class="category">
        <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" />
    </div>
</div>

于 2020-09-22T22:22:13.113 回答