HTML

Question

一直在想办法解决这个问题，但我似乎没有掌握这个窍门。

我正在尝试在这张笔记本电脑图像中播放一段视频。我想让图像和视频都响应浏览器大小的变化。

有人能帮忙吗？？？

<div id="tvBorder" style="background-image: url('http://www.ninasalon.co.uk/images/testing.png'); background-repeat:no-repeat; width:625px; height:532px; padding:80px;">

<iframe src="https://player.vimeo.com/video/125108525?title=0&byline=0&portrait=0" width="517" height="298" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="margin-left:14px;margin-top:-27px;"></iframe>

</div>

提前致谢:)

Answer 1

使用 vw 单位根据视口的宽度缩放尺寸。

您将需要调整以下数字以使其适合，但这是总体思路：

CSS

div {
    background-image: url('http://www.ninasalon.co.uk/images/testing.png');
    background-repeat:no-repeat;
    background-size: 100%;
    width:62.5vw;
    height:53.2vw;
    padding:8vw;  
}

iframe {
    width:51.7vw;
    height:29.8vw;
    margin-left:1.4vw;
    margin-top:2.7vw;
}

HTML

<div id="tvBorder">

<iframe src="https://player.vimeo.com/video/125108525?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

Here is a JSFiddle that shows it in action.

HTML - 我可以在图像中使用 iframe 并使其响应吗？

HTML - Can I have an iframe inside an image and make it responsive?

video

iframe

image

responsive-design