Javascript 固定宽度/高度div中具有不同格式的全中心图片

我正在创建一个带有220px 220px平方div的滑块。每个div包含一张图片，我希望它适合div。我有横向格式的图片，还有纵向格式的图片。
您可以在此处查看一个示例：
代码如下：

<div>
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg" />
</div>
<div>
    <img src="http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg" />
</div>

div
{
    background: #333;
    position: relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    overflow: hidden;
}
img
{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

$('img').each(function(){
    if ($(this).height() > $(this).width())
    {
        $(this).css('width', '100%');
        $(this).css('height', 'auto');
    }
    if ($(this).height() < $(this).width())
    {
        $(this).css('width', 'auto');
        $(this).css('height', '100%');
    }
});

div
{
背景：#333；
位置：相对位置；
显示：内联块；
宽度：220px；
高度：220px；
溢出：隐藏；
}
img
{
位置：绝对位置；
保证金：自动；
排名：0；
底部：0；
左：0；
右：0；
}
$（'img'）。每个（函数（）{
如果（$（this.height（）>$（this.width（））
{
$（this.css（'width'，'100%'）；
$（this.css（'height'，'auto'）；
}
如果（$（this.height（）<$（this.width（））
{
$（this.css（'width'，'auto'）；
$（this.css（'height'，'100%'）；
}
});

问题是，有时，如果javascript没有正确加载，图片会以全尺寸显示。

---

我想知道是否有一种CSS回滚，它至少能正确显示图片，还是一种强制javascript图片调整大小的方法？

您可以删除javascript并用纯CSS替换它。顺便说一句，我认为您当前解决方案的裁剪可能不是您想要的，因为风景图像没有裁剪居中

如果您不介意将图像作为div背景，这是我针对此问题的解决方案：

<div class="tile image-crop" style="background-image: url('http://s.hswstatic.com/gif/landscape-photography-1.jpg');"></div>
<div class="tile image-crop" style="background-image: url('http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg');"></div>

.tile {
  width:220px;
  height:220px;
  display:inline-block;
  position:relative;
}
.image-crop {
  background-size:cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.瓷砖{
宽度：220px；
高度：220px；
显示：内联块；
位置：相对位置；
}
.图像裁剪{
背景尺寸：封面；
背景位置：50%50%；
背景重复：无重复；
}

---

您可以直接删除javascript并用纯css替换它。顺便说一句，我认为您当前解决方案的裁剪可能不是您想要的，因为风景图像没有裁剪居中

如果您不介意将图像作为div背景，这是我针对此问题的解决方案：

<div class="tile image-crop" style="background-image: url('http://s.hswstatic.com/gif/landscape-photography-1.jpg');"></div>
<div class="tile image-crop" style="background-image: url('http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg');"></div>

.tile {
  width:220px;
  height:220px;
  display:inline-block;
  position:relative;
}
.image-crop {
  background-size:cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.瓷砖{
宽度：220px；
高度：220px；
显示：内联块；
位置：相对位置；
}
.图像裁剪{
背景尺寸：封面；
背景位置：50%50%；
背景重复：无重复；
}

---

我建议您使用背景图像来解决此问题

<div class='a'></div>
<div class='b'></div>

div
{
    background: #333;
    position: relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.a
{
    background-image: url("http://s.hswstatic.com/gif/landscape-photography-1.jpg");
}

.b
{
    background-image: url("http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg");
}

div
{
背景：#333；
位置：相对位置；
显示：内联块；
宽度：220px；
高度：220px；
溢出：隐藏；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
A.
{
背景图像：url（“http://s.hswstatic.com/gif/landscape-photography-1.jpg");
}
B
{
背景图像：url（“http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg");
}

我建议您使用背景图像来解决此问题

<div class='a'></div>
<div class='b'></div>

div
{
    background: #333;
    position: relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.a
{
    background-image: url("http://s.hswstatic.com/gif/landscape-photography-1.jpg");
}

.b
{
    background-image: url("http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg");
}

div
{
背景：#333；
位置：相对位置；
显示：内联块；
宽度：220px；
高度：220px；
溢出：隐藏；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
A.
{
背景图像：url（“http://s.hswstatic.com/gif/landscape-photography-1.jpg");
}
B
{
背景图像：url（“http://www.sallyportraits.com/assets/images/pencil_portraits_-cm05.jpg");
}

您需要整个图片在缩略图上可见还是只显示部分图像？您需要整个图片在缩略图上可见还是只显示部分图像？谢谢。我更喜欢内联背景图片风格，这就是为什么我选择这个答案而不是肖彦浩的答案。谢谢。我更喜欢内联背景图片风格，这就是为什么我选择这个答案而不是肖彦浩的答案。好的解决方案。我选择这一个并不是因为我有很多图片，而且仅仅为了指定背景图片而添加多个css类是很乏味的。这是一个很好的解决方案。我不选择这个，只是因为我有很多图片，而且仅仅为了指定背景图片而添加多个css类是很乏味的。