如何使用CSS将矩形图像裁剪成正方形？

Question

我有一个矩形图像，我想把它裁剪成方形。它是这样的：

img {
    width:  200px;
    height: 200px;
}

效果很好，但只有当我知道最终的宽度和高度时。但是，当我不知道高度值，只有宽度而不是px而不是％？

时，我该怎么做

img {
    width: 25%;
}

我只有宽度（25％），我需要方形图像。我该怎么办？

我需要CSS中的解决方案。我不能用JS。

Answer 1

如果它不需要是img那么我会创建一个div，使图像为background-image，强制一个伪元素使高度相对于div的宽度，然后将cover div与background-size一起制作背景图片：

http://jsfiddle.net/8tqxvvzs/

div
{
    position: relative;
    display: block;
    background-image: url('http://placehold.it/350x150');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 25%;
}

div:before
{
    content: "";
    display: block;
    padding-top: 100%;
}