将最大宽度，最大高度与宽度，高度结合使用

Question

I beginning to learn css, and I am writing code based on a course am watching. The author has written the style for left bar images to look like this:

.left-side img{
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}

What's the use of width: 100% and height: 100%. Removing them seems to not have any effect.

Answer 1

The current image has original size of 32x32 pixels, you can replace the same image with other image of 512x512px,

width: 100% - no matter, what is the actual width of image, stretch it to 100% width of parent container

height: 100%; - no matter, what is the actual height of image, stretch it to 100% height of parent container

max-width: 140px; - if image is big, limit it to this value or if smaller, width100% will stretch it till 140px

max-height: 140px; - if image is big , limit it to this value or if smaller, height100% will stretch it till 140px

 .left-side img { width: 100%; height: 100%; max-width: 140px; max-height: 140px; } 

 <h1>image: 32X32</h1> <div class="left-side"> <img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-32.png" alt="32X32" title="32X32"> </div> <hr> <h1>image: 512X512</h1> <div class="left-side"> <img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-512.png" alt="512X512" title="512X512"> </div>