你這樣圖片原本是矩形的話,設置成這樣不會拉伸變形嗎?

 <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>

用js設置圖片的參數好做一些

第一種就是用position方法
第二種就是在相關的標簽中直接設置就是那個style屬性中設置

使用js動態獲取圖片的寬，然后賦值為圖片的高

看看這個例子

.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%; /* 關鍵就在這里 */ background-position: center; background-repeat: no-repeat; background-size: cover; } .figure-list figure a{ display: block; position: absolute; width: 100%; top: 0; bottom: 0; }

<br> .figure-list{<br> margin: 0;<br> padding: 0;<br> }<br> .figure-list:after{<br> content: &quot;&quot;;<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%; /* 關鍵就在這里 */<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>

我覺得還是設置成背景圖,然后顯示圖片某本分的好