有没有一种方法可以缩放比例而不拉伸对象拟合？

问题描述

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

keyPassword

html

key.properties

这里有个小提琴在解释我的意思：

http://jsfiddle.net/n1x5ak2t/

如果图像能够按比例缩放到适合新的div宽度而不会变形，我会很高兴。

解决方法

考虑其他动画。这是使用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>

,

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

https://jsfiddle.net/7d31Ln0f/

,

这是另一种方法。

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>