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

Question

很明显，CSS并没有下面这样的写法：

.text img {width:50%;height=width;}

那么如何强制图片为正方形显示呢？宽度不固定的情况下

Answer 1

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

Answer 2

&nbsp;<div&nbsp;class="wrap"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="div"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src=""> &nbsp;&nbsp;&nbsp;&nbsp;</div> </div> <style> .wrap{width:50px;} .div{ &nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;height:0px; &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:100%; &nbsp;&nbsp;&nbsp;&nbsp;position:relative; } .div&nbsp;img{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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

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