响应式图片

　　

　　响应式图片会自动适配各种尺寸的屏幕。

　　

　　实例中，你可以通过重置浏览器大小查看效果。

　　

　　如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

　　

　　实例

　　

　　img {

　　

　　max-width: 100%;

　　

　　height: auto;

　　

　　}

　　

　　卡片式图片

　　

　　实例

　　

　　div.polaroid {

　　

　　width: 80%;

　　

　　background-color: white;

　　

　　box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

　　

　　}

　　

　　img {width: 100%}

　　

　　div.container {

　　

　　text-align: center;

　　

　　padding: 10px 20px;

　　

　　}