阿里云服务器

现在wordpress网站一般都做响应式的,可以自适应多个设备比较方便。在响应式网站中最重要的就是处理图片的自适应。

第一个方法就是把图片作为背景,然后添加background-size:100%;让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形

bootstrap中有很好的解决方法:

响应式图片的代码:

<img src="..." class="img" alt="响应式图像">

然后通过css来限制:

.img {
  display: inline-block;
  height: auto;
  max-width: 100%;}

这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。

设置 height:auto,相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。


相关阅读: