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.

score 1 · Accepted Answer · answered Sep 22 '20 at 22:12

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>

Oh this is clean! Thanks so much – Chris Grim Sep 22 '20 at 22:15 — Chris Grim, Sep 22 '20 at 22:15

score 0 · Answer 2 · answered Sep 22 '20 at 22:03

0

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

https://jsfiddle.net/7d31Ln0f/

answered Sep 22 '20 at 22:03

Constantin

3,655
1
14
23

That just stretches the image. I want to actually stretch the div wider without stretching the image – Chris Grim Sep 22 '20 at 22:06
did you try the fiddle? – Constantin Sep 22 '20 at 22:07
I tried it. It actually inspired me to do ``` div.category:hover { transform:scalex(1.2) } div.category:hover img { transform:scale(1.2) } ``` – Chris Grim Sep 22 '20 at 22:10
If you wanna scale the div with the image, you have 2 conflicting css properties: - `object-fit:cover;` - `transform:scalex(1.2) ` you probably wanna use `scale(1,2)`, not `scalex` to preserve the aspect ratio – Constantin Sep 22 '20 at 22:11

score 0 · Answer 3 · answered Sep 22 '20 at 22:22

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>

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

3 Answers3