CODEWITHSUNDEEP
javascripthtmlcss
phzdjz
phzdjz

Reputation: 99

Everytime 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: enter image description here

.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>

Upvotes: 1

Views: 95

Answers (3)

Himanshu
Himanshu

Reputation: 11

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;  
}

Upvotes: 1

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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>

Upvotes: 0

Mrbisquit
Mrbisquit

Reputation: 97

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>

Upvotes: 2

Related Questions