有没有一种方法可以在不拉伸 Object Fit 的情况下变换比例？

Question

如果我使用的是变换比例尺，有没有办法让使用覆盖物的对象适合图像不被拉伸？这是我的代码

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>

这里有一个 fiddle 解释我的意思：

http://jsfiddle.net/n1x5ak2t/

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

Answer 1

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

https://jsfiddle.net/7d31Ln0f/

Answer 2

考虑一个不同的动画。这是一个使用 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>

Answer 3

这是一种不同的方法。

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>

有没有一种方法可以在不拉伸 Object Fit 的情况下变换比例？

Is there a way to transform scale without stretching an Object Fit?

css

css-transforms

object-fit