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并使其响应吗？

1 个答案: