带针脚的响应式图像 - 第二部分

时间:2017-08-26 01:41:39

标签: html5 css3 responsive-design

我是新手。如果不清楚,我道歉。

我试图找出如何使图像水平响应而且垂直响应图像顶部的图钉缩放以匹配图片(而不是视口)。

我找到了以下帖子,这对于我正在尝试的内容非常适合,除了图像在视口内不垂直(即,有一个垂直滚动条)一个小的浏览窗口)。

Objects follow responsive background-image

我可以通过将vw和vh添加到容纳图像的容器来调整图像的大小,但是引脚然后相对于视口而不是图像移动。有没有人知道如何修改上面帖子中的代码,使房屋的图片完全适合视口,同时保持销钉到位 - 即在同一栋房子上?

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用:

overflow: hidden

https://jsfiddle.net/jynf21kw/2/