Everytime i change the image img is resizing-CodePudding

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 >
    <img src="https://loremflickr.com/400/400" />
</div>
</body>
</html>

CodePudding user response：

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>

CodePudding user response：

max-width: 100%; Which means whatever size the image will be, the image will appear in it. When width:200px is there, the image of any size will show in 200px only.
.cat { width: 300px; height: 300px; } img { width: 300px; height: 300px; }

CodePudding user response：

Images have width and height different by default. So you should specified values of them. e.g:

.cat {
 width:200px;
 height: 500px;
 border: solid;
}
img{
  width: 100%;
  height: 100%;
}
.item {
 width: 100%;
 height: 50%;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<div >
    <div ><img src="https://loremflickr.com/400/400" /></div>
    <div ><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" /></div>
</div>
</body>
</html>