TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊
<div class="wrap">
<div class="div">
<img src="">
</div>
</div>
<style>
.wrap{width:50px;}
.div{
width:100%;
height:0px;
padding-bottom:100%;
position:relative;
}
.div img{
width:100%;
height:100%;
position:absolute;
}
</style>
TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊
第一種就是用position方法
第二種就是在相關(guān)的標(biāo)簽中直接設(shè)置就是那個(gè)style屬性中設(shè)置
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個(gè)贊
看看這個(gè)例子
.figure-list{ margin: 0; padding: 0; } .figure-list:after{ content: ""; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .figure-list li{ list-style: none; float: left; width: 23.5%; margin: 0 2% 2% 0; } .figure-list figure{ position: relative; width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 100%; /* 關(guān)鍵就在這里 */ background-position: center; background-repeat: no-repeat; background-size: cover; } .figure-list figure a{ display: block; position: absolute; width: 100%; top: 0; bottom: 0; }
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超5個(gè)贊
<br> .figure-list{<br> margin: 0;<br> padding: 0;<br> }<br> .figure-list:after{<br> content: "";<br> display: block;<br> clear: both;<br> height: 0;<br> overflow: hidden;<br> visibility: hidden;<br> }<br> .figure-list li{<br> list-style: none;<br> float: left;<br> width: 23.5%;<br> margin: 0 2% 2% 0;<br> }<br> .figure-list figure{<br> position: relative;<br> width: 100%;<br> height: 0;<br> overflow: hidden;<br> margin: 0;<br> padding-bottom: 100%; /* 關(guān)鍵就在這里 */<br> background-position: center;<br> background-repeat: no-repeat;<br> background-size: cover;<br> }<br> .figure-list figure a{<br> display: block;<br> position: absolute;<br> width: 100%;<br> top: 0;<br> bottom: 0;<br> }<br>
舉報(bào)