怎样通过CSS和js强制图片显示为正方形

Question

很明显，CSS并没有下面这样的写法：.text img {width:50%;height=width;}那么如何强制图片为正方形显示呢？宽度不固定的情况下

Answer 1

你这样图片原本是矩形的话,设置成这样不会拉伸变形吗?

Answer 2

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

Answer 3

用js设置图片的参数好做一些

Answer 4

第一种就是用position方法
第二种就是在相关的标签中直接设置就是那个style属性中设置

Answer 5

使用js动态获取图片的宽，然后赋值为图片的高

Answer 6

看看这个例子

.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; }

Answer 7

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

Answer 8

我觉得还是设置成背景图,然后显示图片某本分的好