https://jsfiddle.net/84e7vL9n/8/
If you look here, a small circle appears, and there's an image of a square on the back
As I put in the animation, the same raw parts of the small image and the large image must be adjusted to the same size
How do you create images of different sizes to increase or decrease at the same rate?
html responsive jquery css
It's hard to know what kind of moves they're doing. Wouldn't it grow at the same rate if you put the image to grow together in a single parent element and grow the parent element?
When you increase or modify the size of an element in the CSS... To set criteria Find out the transform-origin properties.
This is possible by adjusting the height
value instead of modifying the width
value of the image tag. This is because the image tag is sized accordingly because the width
value or height
value is auto
by default.
https://jsfiddle.net/w558gxvu/
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
.fadeIn {
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fadeIn;
}
#animate-img {
display:none;
z-index:2;
}
#animate-img2 {
z-index:2;
height: 46px;
}
.hide{display:none;}
.show{display:inline;}
/* Since the two images have the same height in common, you can resize them in the same proportion by adjusting the height of the two images.*/
img {
height: 92px !important;
}
© 2025 OneMinuteCode. All rights reserved.