自适应网站图片如何自适应？

自适应网站是网站PC端和手机端公用一套网站模板，网站前端所有html、css可以随着浏览器的随意放大和缩小，而网站自身布局和样式不会产生太大变化的网站，自身网站的图片自适应也是自适应当中的一部分。如何让网站图片自适应呢？

网站图片在网站轮播图、缩略图、文章中经常运用，其实在前端中让图片自适应还是很简单的。

首先，你必须在head标签中声明自适应缩放。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

其次，再对img标签部分进行设置。

.图片的父级class元素 img{display:block;width:100%;height:auto;}

大致意思是把图片变成一个块级元素，宽度继承父级元素，高度根据图片宽度自动缩放。有了这两个条件，自适应网站的图片就可以在自适应缩放。