响应式相册

来源：互联网发布：sql语言分为几种类型编辑：程序博客网时间：2024/06/06 00:27

兼容性：ie8+

知识点：

1,box-sizing: border-box;

2,img 图片的缩放：外层套个div ,内层使用img，然后width：100%，height:auto;

<span style="color:#333333;">代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式图片</title><style type="text/css">*{box-sizing: border-box;margin: 0;padding: 0}.res{width: 24.99999%;float: left;padding: 0 6px;}.img{border: 1px solid #ccc;text-align: center;}.img:hover{border-color: #777;}.img img{width: 100%;height: auto;}.img .text{padding: 15px;}</style></head><body><div class="res"><div class="img"><img src="paris.jpg" alt="图片"><div class="text">Add a description of the image here</div></div></div><div class="res"><div class="img"><img src="paris.jpg" alt="图片"><div class="text">Add a description of the image here</div></div></div><div class="res"><div class="img"><img src="paris.jpg" alt="图片"><div class="text">Add a description of the image here</div></div></div><div class="res"><div class="img"><img src="paris.jpg" alt="图片"><div class="text">Add a description of the image here</div></div></div></body></html></span>

0 0