CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vladimir Antalik
Vladimir Antalik

Reputation: 29

Image inside div full width of screen

I need to have image inside div element which has width of 500px. But I need that this image is set to full width of screen. That means:

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

But I need that image size is for full width of screen. That means that I don't need to have image only for 500px I need that this image is resizable of screen width. This img must be inside this div element. Thank you

Upvotes: 2

Views: 1566

Answers (1)

Greg A.
Greg A.

Reputation: 75

Just set the position of your image to fixed, the width and the height to 100% and the top and left to 0.

It will then be fullscreen in your browser.

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

In your example:

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

Upvotes: 2

Related Questions