时间戳

首页 > 解决方案 > 使用css拉伸内容以适应桌面页面

html - 使用css拉伸内容以适应桌面页面

问题描述

如何拉伸此内容以适应桌面的整个页面宽度？

html:

<div class="entry-content">
<blockquote class="wp-embedded-content" data-secret="paBu4nyBJV">. 
<p>. <a href="https://tbwdrawingprize.artopps.co.uk/online- 
entry/">Online Entry</a></p></blockquote>
<p><iframe title="&#8220;Online Entry&#8221; &#8212; TBW Drawing 
Prize" class="wp-embedded-content" sandbox="allow-scripts" 
security="restricted" style="position: absolute; clip: rect(1px, 
1px, 1px, 1px);" src="https://tbwdrawingprize.artopps.co.uk/online- 
entry/embed/#?secret=paBu4nyBJV" data-secret="paBu4nyBJV" 
width="600" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p><embed style="width: 500px; height: 300px;"

https://adsler.co.uk/adsler-blog/

标签： htmlcsswordpress

解决方案

如果您指的是 iframe - 宽度设置为600pxwidth 属性。如果将其替换为100%它将填充父级的宽度。

<iframe title="&#8220;Online Entry&#8221; &#8212; TBW Drawing 
Prize" class="wp-embedded-content" sandbox="allow-scripts" 
security="restricted" style="position: absolute; clip: rect(1px, 
1px, 1px, 1px);" src="https://tbwdrawingprize.artopps.co.uk/online- 
entry/embed/#?secret=paBu4nyBJV" data-secret="paBu4nyBJV" 
width="100%" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe>

如果您想让更改对所有iframe和embed标签通用，请尝试以下 css

iframe, embed {
  width: 100% !important
}

推荐阅读