使用最大宽度，最大高度与宽度，高度的组合

Question

我开始学习css，并且正在根据正在观看的课程编写代码。作者已经写出左栏图像的样式，如下所示：

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

宽度的使用情况：100％和高度：100％。去除它们似乎没有任何作用。

Answer 1

当前图像具有32×32像素的原始尺寸，你可以替换512x512px的其他图像相同的图像，

width: 100% - 不管是什么图像的实际宽度，其拉伸至100％的宽度父容器

height: 100%; - 不管是什么形象的实际高度，其拉伸至父容器的100％高度

max-width: 140px; - 如果图像是大的，它限制在这个值，或者更小，width100％将它伸展到140px

max-height: 140px; - 如果图像是大的，它限制在这个值，或者更小，height100％将延伸它，直到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>