Question

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

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

第一个和第二个演示之间的区别

第一个演示：

.exPex {
   width: 100%;
}

第二次演示：

.exPex {
   width: 200%;
}

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

Answer 1

你可以使用transform：

.exPex {
   position: absolute;
   left: 0;
   top: 0;
   min-width:100%;
   margin: 0;
   transform: scale(2);
   transform-origin: 0 40px;
}

http://codepen.io/gc-nomade/pen/jrbPRy

Answer 2

您可以将图像设置为背景图像，然后使用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所指出的，使用背景图片而不是将图像保留在页面内容中存在缺点。这些可能包括搜索引擎和屏幕阅读器无法识别图像。我没有详尽的缺点清单，但根据您的申请，可能值得调查。

Answer 3

如果您为图像定义尺寸，则还会包含纵横比。最好的方法是将图像放在div中并声明图像的大小，这样你也可以裁剪图像。

Answer 4

好吧看起来很明显，但你可以给它固定一个宽度？例如，尝试使用width: 100%上的width: 400px更改.exPex。

Instagram风格探索带有CSS

4 个答案: