我们通过bootstrap可以很方便的实现图片的自适应:
<img src="..." class="img-responsive" alt="Pic">
如果不打算引用bootstrap,通过纯css,我们可以查看bootstrap中img-responsive类的定义:
.img-responsive { display: inline-block; height: auto; max-width: 100%;}
这样我们就用纯CSS完成了图片自适应;
对代码说明一下:display是让图片以内敛形式呈现,而且可设置宽高;
然后再用max-width设置宽度,它可以覆盖其他类对该标签width属性的设定;height让图片高度自适应,同样可以反过来设置,不过一般这种情况出现的更多。
Atas ialah kandungan terperinci 怎样实现图片大小自适应 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!