Question

我正在创建一个220px x 220px平方div的滑块。每个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

Answer 2

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

<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的不同格式的完整中心图片

2 个答案: