Question

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

<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>

图像里面的div全屏宽度

1 个答案: