javascript - 固定宽度/高度 div 中不同格式的全中心图片

Question

我正在创建一个带有 220px x 220px 方形 div 的 slider 。每个 div 包含一张图片，我希望它适合该 div。我有横向格式的图片和其他纵向格式的图片。
您可以在此处查看示例:https://jsfiddle.net/m7ntythy/
代码如下:

<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%');
    }
});

问题是，有时，如果 JavaScript 未正确加载，图片会以全尺寸显示。我想知道是否有 CSS 回滚至少可以正确显示图片或强制 javascript 图片调整大小的方法？

Answer 1

你可以删除 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;
}

Working Example