html - 叠加图像以显示全景图

Question

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

解决了..另一个想法让我解决了我的问题..无论如何，如果有人需要它，那就是解决方案

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

只需设置 DIV Tag 的高度并使用 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/中看到一个示例