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

Question

If I am using a transform scale is there a way to keep the object fit image using cover from stretching? Here is my code

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>

Here is a fiddle explaining what I mean:

http://jsfiddle.net/n1x5ak2t/

I would love if the image just scaled up to fit the new div width without distorting.

Answer 1

Consider a different animation. Here is an idea using 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 2

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

https://jsfiddle.net/7d31Ln0f/

Answer 3

Here is a different approach.

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>