I have 2 methods for you.
Method 1.
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
img {
transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />
Browser support note: browsers statistics showed inline in css
.
Method 2.
#wrap {
overflow: hidden;
position: relative;
float: left;
}
#wrap img.fake {
float: left;
visibility: hidden;
width: auto;
}
#img_wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#img_wrap img.normal {
width: 50%;
}
<div id="wrap">
<img class="fake" src="https://via.placeholder.com/300x200" />
<div id="img_wrap">
<img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
</div>
</div>
Note: img.normal
and img.fake
is the same image.
Browser support note: This method will work in all browsers, because all browsers support css
properties used in method.
The method works in this way:
#wrap
and#wrap img.fake
have flow#wrap
hasoverflow: hidden
so that its dimensions are identical to inner image (img.fake
)img.fake
is the only element inside#wrap
withoutabsolute
positioning so that it doesn’t break the second step#img_wrap
hasabsolute
positioning inside#wrap
and extends in size to the entire element (#wrap
)- The result of the fourth step is that
#img_wrap
has the same dimensions as the image. - By setting
width: 50%
onimg.normal
, its size is50%
of#img_wrap
, and therefore50%
of the original image size.