{"action":"opened","issue":{"url":"https://api.github.com/repos/zsjie/blog/issues/3","repository_url":"https://api.github.com/repos/zsjie/blog","labels_url":"https://api.github.com/repos/zsjie/blog/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/zsjie/blog/issues/3/comments","events_url":"https://api.github.com/repos/zsjie/blog/issues/3/events","html_url":"https://github.com/zsjie/blog/issues/3","id":183464723,"number":3,"title":"使用 CSS 实现自适应的正方形","user":{"login":"zsjie","id":6982248,"avatar_url":"https://avatars.githubusercontent.com/u/6982248?v=3","gravatar_id":"","url":"https://api.github.com/users/zsjie","html_url":"https://github.com/zsjie","followers_url":"https://api.github.com/users/zsjie/followers","following_url":"https://api.github.com/users/zsjie/following{/other_user}","gists_url":"https://api.github.com/users/zsjie/gists{/gist_id}","starred_url":"https://api.github.com/users/zsjie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zsjie/subscriptions","organizations_url":"https://api.github.com/users/zsjie/orgs","repos_url":"https://api.github.com/users/zsjie/repos","events_url":"https://api.github.com/users/zsjie/events{/privacy}","received_events_url":"https://api.github.com/users/zsjie/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-10-17T16:31:10Z","updated_at":"2016-10-17T16:31:10Z","closed_at":null,"body":"使用 CSS 实现自适应的正方形\r\n===\r\n\r\n在移动端页面中，我们经常要实现一个自适应的正方形 banner。以下是几种实现方式，可以根据项目的实际情况选取合适的方式。\r\n\r\n页面结构通常为：\r\n\r\n    <div class=\"container\">\r\n\t    <div class=\"banner\"></div>\r\n    </div>\r\n\r\n##利用 `vw` 单位\r\n这种办法是推荐使用的，毕竟是移动端，几乎不存在 `vw` 单位的兼容性问题。\r\n\r\n    .container {\r\n\t    width: 100%;\r\n\t    max-width: 32rem;\r\n    }\r\n    .banner {\r\n\t    width: 100%;\r\n\t    height: 100vw;\r\n    }\r\n\r\n##利用 `padding-bottom` \r\n这里有一个知识点，按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了。\r\n\r\n    .banner {\r\n\t    width: 100%;\r\n\t    padding-bottom: 100%;\r\n    }\r\n\r\n##利用伪元素的 `margin(padding)-top`\r\n\r\n    .banner {\r\n\t    width: 100%;\r\n\t    overflow: hidden;\r\n    }\r\n    .banner:after {\r\n\t    content: '';\r\n\t    display: block;\r\n\t    margin-top: 100%;\r\n    }\r\n\r\n值得注意的是，`overflow: hidden;` 是为了解决容器与伪元素在垂直方向发生了外边距折叠的问题。\r\n\r\n用第二和第三种方法实现时，显然 `.banner` 中的内容会使高度溢出。所以通常我们都会将内容放到独立的内容块中，利用绝对定位消除空间占用。\r\n"}}
{"actor":{"display_login":"zsjie"}}