使用最大寬度，最大高度與寬度，高度的組合

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>