Question

我想保持视频嵌入（iframe）的尺寸与缩小尺寸相同。

此时会出现两条黑色线条，当您将其缩小时会变大。

最简单的方法是什么？我想在没有Javascript的情况下这样做（如果可能的话！）。

CSS

img {
   float:left;
   max-width: 100%;
   height: auto;
   margin:0 20px 20px 0;
}

iframe {
  max-width:100%;
  float:left;
  display:inline-block;
  margin:0 20px 20px 0;
}

HTML

<h2>I Like Meat</h2>

<img src="http://www.newhealthguide.org/images/10439404/image001.jpg">

<p>Bacon ipsum dolor sit amet beef turducken andouille ball tip prosciutto. Fatback cow venison, turkey strip steak kielbasa flank ham pancetta filet mignon kevin boudin tongue. Andouille t-bone leberkas beef short loin. Spare ribs tongue rump tri-tip t-bone hamburger pastrami landjaeger sirloin bresaola doner shank salami. Porchetta pancetta ribeye meatball, venison turducken spare ribs doner sirloin t-bone strip steak. Jerky t-bone venison pancetta fatback short ribs chicken turkey pork chop sausage. Turkey doner ball tip ribeye tail.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<img src="http://churchhillnaturalmeats.com/wp-content/uploads/2012/12/churchhill-natural-meats-meat-variety1.jpg">

<p>Bacon ipsum dolor sit amet beef turducken andouille ball tip prosciutto. Fatback cow venison, turkey strip steak kielbasa flank ham pancetta filet mignon kevin boudin tongue. Andouille t-bone leberkas beef short loin. Spare ribs tongue rump tri-tip t-bone hamburger pastrami landjaeger sirloin bresaola doner shank salami. Porchetta pancetta ribeye meatball, venison turducken spare ribs doner sirloin t-bone strip steak. Jerky t-bone venison pancetta fatback short ribs chicken turkey pork chop sausage. Turkey doner ball tip ribeye tail.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<iframe src="//player.vimeo.com/video/88680344?title=0&amp;byline=0&amp;portrait=0&amp;color=f68f85" width="650" height="366" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

Answer 1

您可以通过将视频放置在容器设置为相对内来完成此操作。将容器的宽度设置为100％，然后使用填充创建所需的宽高比。

将视频绝对放置在宽度和高度为100％的位置，它将填充容器。

<div class="video">
    <iframe ></iframe> 
</div>

.video{
   width:100%;
   padding-bottom:55.5%;
   position:relative;
}

.video iframe{
 position:absolute;
    width:100%;
    height:100%;
}

实施例： http://jsfiddle.net/zt0qjo2m/1/

保持iframe比率与响应缩放

1 个答案: