css - 通过响应缩放保持 iframe 比率

Question

我希望在缩小时保持视频嵌入 (iframe) 的尺寸不变。

此时会出现两条黑线，并且随着您将其缩小而变大。

示例:http://jsfiddle.net/k5nbmqau/

最简单的方法是什么？我想在没有 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/