javascript - instagram 样式探索页面图像列表与 CSS

Question

我正在尝试制作一个 Instagram 风格的探索页面，但我在这里有一个问题。我创建了这个 DEMO 来自 codepen.io 。

在此演示中，您可以看到图像。图片的width 和height 是不一样的。我想像这样用 CSS 裁剪图像 DEMO 页面。

第一个和第二个demo的区别

第一个演示:

.exPex {
   width: 100%;
}

第二个演示:

.exPex {
   width: 200%;
}

所以第二个演示只在 crome 中工作，但我认为这不是个好主意。任何人都可以告诉我，我如何获得他们第二次演示的结果？

Answer 1

您可以将图像设置为背景图像并使用 background-size: cover; 来获得您正在寻找的效果 ( DEMO )。这样做的缺点是您的用户将无法像他们期望的那样右键单击或拖动图像(以保存它们等)。

示例图片的 HTML:

<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
</div>

CSS:

._jjzlb {
    position: relative;
    padding-top: 100%;
    width: 100%;
    overflow: hidden;
    margin: 1px;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /* Optional centered background */
    background-position: center;
}

如果不能接受这个缺点，您还可以将隐藏的图像放在背景之上，这样它们就会像用户期望的那样工作。

具有正常图像鼠标交互的示例图像的 HTML:

<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');">
    <img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex">
</div>

CSS 隐藏顶部的图像:

.exPex {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity:0;
}

这是一个 DEMO使用图像，像您期望的那样与用户互动。

编辑:正如@GCyrillus 所指出的，使用背景图像比将图像保留在页面内容中有缺点。这些可能包括无法识别图像的搜索引擎和屏幕阅读器。我没有详尽的缺点列表，但根据您的应用，它可能值得研究。