Stretching content to fit desktop page using css

Question

How do I stretch this content to fit full page width in desktop?

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/

Answer 1

如果您引用的是iframe，则将width属性的宽度设置为600px。 如果将其替换为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
}

Answer 2

如果我不误解您的问题，则应将宽度设置为100％。我试图在您发布的链接上对其进行编辑，它似乎非常适合屏幕宽度。

<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="100%" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p><embed style="width: 100%; height: 300px;"

Answer 3

之所以会这样，是因为您已将行内宽度样式应用于embed和iframe标签，如您在此处看到的那样：

和

（从页面检查：Chrome Devtools）

将其更改为width:100%，您将一路顺风！干杯！