屏幕全宽 div 内的图像

Question

我需要在宽度为 500px 的 div 元素中放置图像。 但我需要将此图像设置为屏幕的全宽。 这意味着：

<div style='width:500px'>Some text <img full width of screen /> some other text </div>

但我需要图像大小适用于整个屏幕宽度。 这意味着我不需要只有 500px 的图像我需要这个图像可以调整屏幕宽度的大小。 这个 img 必须在这个 div 元素内。 谢谢

Answer 1

只需将图像的位置设置为固定，宽度和高度为 100%，顶部和左侧为 0。

然后它将在您的浏览器中全屏显示。

img{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

在你的例子中：

<div style='width:500px'>Some text 
  <img style="background: red; width: 100%;height: 100%; position: fixed;
  left: 0;top:0" full width of screen /> 
some other text 
</div>