Menu
Let's say a 2000x2000px pixel image is initially displayed at a size that is 10 times lower, meaning 200x200px
If transformed through a CSS3 scale(10) here method, it will sure works fine, bu it'll also look very blurry, even if the image is initially displayable at such a size
Is there a way to get the initial image size back though this kind of transform ? Meaning displaying the "original" sizes image through a transform
386
Use object fit property in your css, and give a fixed width and height to your image tag or respective class so that every image will have same width and height, Now Your Image won't be distorted. Save this answer.
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
The resize image property is used in responsive web where image is resizing automatically to fit the div container. The max-width property in CSS is used to create resize image property. The resize property will not work if width and height of image defined in the HTML.
You could try and do the scaling the other way around.
So, in the regular state, you downscale the image to 200x200 with transform: scale(0.1) and when you want it to enlarge, just set it to scale(1). That way you shouldnt experience any blurriness.
Checkout this jsFiddle.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
