无论图像宽度和高度如何，都将方形图像div显示为帧

Question

可能以前曾经问过，我根本不知道该找什么。无论如何，我已经很努力地找到关于这个主题的任何内容但是到现在为止我没有遇到任何有用的东西。

我希望这个问题很简单。我想将div显示为用户发布的图像帧。 div应该是正方形，但仍然应该用图片填充。

这是一个完美的例子：http://500px.com/popular方块总是被完全填充，但图像不会以任何方式改变。据我所见，无论宽度和高度如何，都只显示图像部分。

如何实现这一目标？

非常感谢任何帮助。

感谢。

Answer 1

在CSS中，您可以尝试使用background-size：cover; ？你必须将图像设置为背景图像，但是你可以应用各种背景样式。

编辑：封面是我想到的。

Answer 2

我肯定会尝试这样的事情。您可以使用background-size属性在box es中填写您要使用的图片。这将不保持纵横比，但强制整个img填充正方形。

小提琴：http://jsfiddle.net/cukgh/

<强> HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<强> CSS：

.box {
    float:left;
    margin:15px;
    width:100px;
    height:100px;
    background:url('http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg');
    background-size:100% 100%;
}

如果您想保持纵横比，但只剪裁更长的宽度/高度，请使用background-size:cover

编辑：

如果您想动态设置图片，请使用较小的script来执行此操作。

示例：http://jsfiddle.net/SinisterSystems/cukgh/2/

如果您还有其他问题，请在论坛中发布不同的问题。单个问题旨在识别单个问题并解决它。