在網頁中，經常會用到圖片，而如果固定了圖片的大小，會使得布局變得不靈活。所以，我們可以使用標簽的width和height屬性來設置圖片的大小，但是這樣會使得圖片失去了比例。

為了解決這個問題，我們可以使用標簽的另一個屬性——style屬性中的max-width和max-height屬性，來讓圖片按比例縮放。

<img src="example.png" style="max-width:100%; max-height:100%;">

這樣，圖片的顯示大小不會超過它父元素的寬度和高度，但是比例會按圖片原本的比例縮放，保持圖片不會失真變形。

當然，也可以只使用其中的一個屬性，比如只設定max-width：

<img src="example.png" style="max-width:100%;">

這樣，圖片的高度會按比例縮放，而寬度則不會超過的父元素的寬度。

使用max-width和max-height的另一個好處是，在響應式設計時，圖片可以隨著屏幕大小而自適應調整大小，適應不同大小的設備。

總結：

• 使用max-width和max-height屬性可以讓圖片按比例縮放而不會失真變形
• 只設定其中一個屬性，寬度或高度會按比例縮放，而另一個則不會超過父元素寬度或高度
• 在響應式設計時，使用max-width和max-height可以讓圖片自適應調整大小