(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{372:function(s,t,e){"use strict";e.r(t);var a=e(3),r=Object(a.a)({},(function(){var s=this,t=s._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"「布局技巧」图片未加载前自动撑开元素高度"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#「布局技巧」图片未加载前自动撑开元素高度"}},[s._v("#")]),s._v(" 「布局技巧」图片未加载前自动撑开元素高度")]),s._v(" "),t("p",[s._v("在移动端开发中，有一些元素是根据图片高度来自动撑开的 ，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。\n"),s._v("\n这种情况我们可以设置如下样式来设置该元素的高度：")]),s._v(" "),t("div",{staticClass:"language-stylus line-numbers-mode"},[t("pre",{pre:!0,attrs:{class:"language-stylus"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".wrapper")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("overflow")]),s._v(" hidden")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("0")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("padding-bottom")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("26.66")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// 这个数值是图片的高宽比，即 高/宽")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#eee")])]),s._v("\n")])]),s._v(" "),t("div",{staticClass:"line-numbers-wrapper"},[t("span",{staticClass:"line-number"},[s._v("1")]),t("br"),t("span",{staticClass:"line-number"},[s._v("2")]),t("br"),t("span",{staticClass:"line-number"},[s._v("3")]),t("br"),t("span",{staticClass:"line-number"},[s._v("4")]),t("br"),t("span",{staticClass:"line-number"},[s._v("5")]),t("br"),t("span",{staticClass:"line-number"},[s._v("6")]),t("br")])]),t("p",[s._v("上面代码中，"),t("code",[s._v("padding-bottom")]),s._v(" 的取值是图片的高宽比（即，高/宽），它会根据 "),t("code",[s._v("width")]),s._v("值的"),t("code",[s._v("26.66%")]),s._v("计算，最终元素的高度会和图片加载完成后的高度一致。")]),s._v(" "),t("p",[s._v("也可以使用"),t("code",[s._v("vw")]),s._v("的方法，但在一些浏览器可能有兼容性问题：")]),s._v(" "),t("div",{staticClass:"language-stylus line-numbers-mode"},[t("pre",{pre:!0,attrs:{class:"language-stylus"}},[t("code",[t("span",{pre:!0,attrs:{class:"token selector"}},[s._v(".wrapper")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("width")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("100")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("%")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("height")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token number"}},[s._v("26.66")]),t("span",{pre:!0,attrs:{class:"token unit"}},[s._v("vw")])]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"token property-declaration"}},[t("span",{pre:!0,attrs:{class:"token property"}},[s._v("background")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token hexcode"}},[s._v("#eee")])]),s._v("\n")])]),s._v(" "),t("div",{staticClass:"line-numbers-wrapper"},[t("span",{staticClass:"line-number"},[s._v("1")]),t("br"),t("span",{staticClass:"line-number"},[s._v("2")]),t("br"),t("span",{staticClass:"line-number"},[s._v("3")]),t("br"),t("span",{staticClass:"line-number"},[s._v("4")]),t("br")])]),t("blockquote",[t("p",[t("code",[s._v("vw")]),s._v("，viewpoint width，视窗宽度，1vw=视窗宽度的1%")]),s._v(" "),t("p",[t("code",[s._v("vh")]),s._v("，viewpoint height，视窗高度，1vh=视窗高度的1%")]),s._v(" "),t("p",[s._v("更多 "),t("a",{attrs:{href:"https://www.runoob.com/cssref/css-units.html",target:"_blank",rel:"noopener noreferrer"}},[s._v("CSS单位"),t("OutboundLink")],1),s._v("。")])])])}),[],!1,null,null,null);t.default=r.exports}}]);