CSS實現圖片寬度自適應

由於瀏覽器的大小可變，導致放置圖片的容器也會隨之變化，要讓圖片和容器大小一起變化，則需要實現圖片寬度自適應

更多精彩

• 更多技術部落格，請移步 asing1elife’s blog

編寫 HTML

1. 用父容器包裹圖片，當瀏覽器的大小發生變化時，首先影響到父容器，而不是圖片

<div class="img-wrap">
    <img src="FullSizeRender 3.jpg">
</div>
<div class="img-wrap">
    <img src="logo-ccnu.png">
</div>
<div class="img-wrap">
    <img src="thumbfma.png">
</div>

編寫 CSS 樣式

1. 指定父容器的展現方式是 inline-block ，則可以讓父容器的寬度隨內容變化而變化
2. 指定圖片的寬度為 100% ，則可以讓圖片的寬度隨父容器寬度變化而變化，而且圖片的寬高比使用不變

<style type="text/css">
    .img-wrap {
        display: inline-block;
    }

    .img-wrap img {
    	width: 100%;
    	vertical-align: middle;
    }
</style>