无论图像宽度和高度如何，都将方形图像 div 显示为框架答案

【问题标题】：Display square image div as frame regardless of image width and height无论图像宽度和高度如何，都将方形图像 div 显示为框架
【发布时间】：2014-02-06 04:34:03
【问题描述】：

也许以前有人问过这个问题，但我根本不知道要寻找什么。无论如何，我已经非常努力地寻找有关此主题的任何内容，但到目前为止我还没有找到任何有用的东西。

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

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

如何做到这一点？

任何帮助将不胜感激。

谢谢。

【问题讨论】：

首先，它正在裁剪图像。我很快就会为你摆弄一些东西。一分钟。

标签： css image html layout

【解决方案1】：

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

编辑：我认为封面是你想要的。

【讨论】：

【解决方案2】：

我肯定会尝试这样的事情。您可以使用background-size 属性为您的boxes 填充您想要使用的图像。这不会保持纵横比，但会强制整个 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/

如果您还有其他问题，请在论坛中发布其他问题。一个问题意味着识别一个问题并解决它。

【讨论】：

好的。这看起来很不错。但是，我确实问自己，当我想显示用户图像时，如何动态加载 CSS 图像？？？
你必须使用某种脚本来处理任何事情dynamic。让我介绍一个新的小提琴。一分钟。
哇，你太棒了，帮了大忙。谢谢！我会先自己尝试一些东西，但我真的没有找到关于该主题的任何适当信息。我什至没听说过:cover。
为您添加了答案。如果您认为您的问题可以接受此答案，请选中投票栏附近的绿色复选框以“接受”答案。
请做。我是一名经验丰富的编码员，但我仍然是鲨鱼海洋中的一条鱼。曝光是你需要的，而不是一个专门的帮手。如果您愿意，可以发布一个新问题并将其作为评论添加到此处，以便我可以跟踪它。可能有人比我有更好的答案。