由于浏览器的大小可变,导致放置图片的容器也会随之变化,要让图片和容器大小一起变化,则需要实现图片宽度自适应,下面青岛星网跟大家分享:CSS 实现图片宽度自适应代码
用父容器包裹图片,当浏览器的大小发生变化时,首先影响到父容器,而不是图片
<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>
指定父容器的展现方式是 inline-block ,则可以让父容器的宽度随内容变化而变化
指定图片的宽度为 100% ,则可以让图片的宽度随父容器宽度变化而变化,而且图片的宽高比使用不变
<style type="text/css"> .img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; } </style>