Question

我正在寻找如何覆盖CSS中的任何图像以显示为全景。我无法找到合适的逻辑来构建它。也许隐藏高地，但这种方式对我没有帮助。

解决了..还有一个想法让我明白我的问题..无论如何，如果有人需要它，那么解决方案

<div style="position: relative; height:100px; overflow:hidden">
    <img src="photo.jpg" style="margin-top:-50px;" />
</div>

只需设置DIV标签的高度，并使用margin-top校正图像位置。

如果有人有其他方式请分享。感谢

感谢回复我的其他人。

Answer 1

任何尺寸图像的示例都是以下CSS：

div{
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-bottom: calc(100%*9/16);
    position: relative;
}

div img {
    top: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    margin: auto;
}

您可以在http://jsfiddle.net/poselab/9vWU8/4/

中查看示例

叠加图像以显示全景

1 个答案: