0
197
ViewsEverytime i change the image img is resizing
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>
·
Juan Pablo Isaza
3 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
Using max-width: 100%; means whatever size the image will be, the image will appear in it. When width: 200px is there, an image of any size will show in 200px only.
.cat
{
width: 300px;
height: 300px;
}
img
{
width: 300px;
height: 300px;
}
·
Juan Pablo Isaza
Report
0
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 class="cat">
<div class="item"><img src="https://loremflickr.com/400/400" /></div>
<div class="item"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" /></div>
</div>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question