Live
<div class="responsive-wrapper"> <img src="https://forgetfulengineer.github.io/gallery/covers/Understanding-five-Common-Relative-Units.png"></div>
Live
x
/* 寬度預設為 width: 100%，寬度隨螢幕寬度改變 */.responsive-wrapper { background-color: blue;}.responsive-wrapper img { width: 80%; /* 圖片佔父容器 80% */ height: auto; /* 維持圖片比例 */}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.