Question

我尝试在响应式布局中保持视频宽高比，以防止布局更改大小时出现黑边。到目前为止，我已经设置了一些媒体查询，但在重新调整大小时，仍有一些观点表明视频有黑边。

您可以在此处查看布局和视频http://smedia.lv/（SHOWREEL视频）。

视频是使用iframe从Vimeo嵌入的，宽度和高度均为100％。视频容器宽度取决于屏幕大小，也以％定义，高度是固定值。

如何保持视频的宽高比，所以它没有黑边？

Answer 1

只为容器添加一些样式（iframe）和.video { height: 410px; width: 964.71px; margin: 0 auto; } iframe { width: 100%; height: 100%; } /* Adjust the max-width depending on the other styles on your site. */ @media(max-width: 1046px) { .video { position: relative; /* 40:17 aspect ratio */ padding-bottom: 42.5%; height: 0; width: auto; } iframe { position: absolute; top: 0; left: 0; } }即可实现此目的。

padding-bottom

查看以下示例。

注意：

您可以使用媒体查询设置断点，此时视频的增长不会超过964.71x410。
如果视频发生变化，您需要更新.video width，.video { height: 410px; width: 964.71px; margin: 0 auto; } iframe { width: 100%; height: 100%; } @media(max-width: 1046px) { .video { position: relative; /* 40:17 aspect ratio */ padding-bottom: 42.5%; height: 0; width: auto; } iframe { position: absolute; top: 0; left: 0; } }和媒体查询以反映视频的正确宽高比。

<div class="video">
  <iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Private Sub Workbook_SheetFollowHyperlink(ByVal sh As Object, ByVal Target As Hyperlink)
Range(ActiveCell.Address).Name = "Delete"

MsgBox ("Activated - Workbook_SheetFollowHyperlink - before IF-ELSE")

If Range(ActiveCell.AddressLocal).Text = "Delete" Then

    ClearThatCell 'Calling ClearThatCell sub
 Else
 MsgBox ("It's regular link - NOT DELETE ")
End If


End Sub
'This SUB is clearing the selected cell
Sub ClearThatCell()
ActiveCell.Clear
 MsgBox ("The cell is cleared!")

End Sub

Sub Workbook_SheetDeactivate(ByVal sh As Object)
        LastSheet = sh.Name
End Sub

在响应式布局中维护视频宽高比

1 个答案: