Everytime i change the image img is resizing

January 24, 2022

I want to make the img tag stricted. In my example, everytime i change the image, size of it also changes.

Here is an example:

.cat {
 width:200px
}
img {
 max-width: 100%;
 height: auto; 
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<div class="cat">
    <img src="https://loremflickr.com/400/400" />
</div>
</body>
</html>

>Solution :

Your doing max-width:100% and height:auto which is letting it go to its default size if you want to make them the same size do the same width as the cat and the same width as the img:

.cat {
 width:200px;
height:200px;
}
img {
 width:200px;
height: 200px;
}

And at that point you don’t need the .cat because they are the same now so:

img {
 width:200px;
height: 200px;
}

You can remove the div with the class cat now since it’s not needed.
And here’s the finished code:

img {
 width:200px;
height: 200px;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<img src="https://loremflickr.com/400/400" />
</body>
</html>