如果我使用的是变换比例，有没有一种方法可以通过拉伸覆盖来保持对象适合图像？这是我的代码
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宽度而不失真，我会很高兴。
考虑一个不同的动画。这里有一个使用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>