CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 107

image width to fit browser width

I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.

I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.

    #container {
            position: relative;
  }
        #divWithin {
           position: relative;
           top: 20%;
           left: 20%; 
           padding: 5px;
           background-color: white;
  }
        #imgWithin{
            width: 100vw; 
            height: 100vh;
            left: 0;
  }

<div id="container">
    <img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
    <div id="divWithin">Testing</div>
</div>

Any help or ideas would be gladly appreciated

What I am trying to achieve is displayed in an image below:

Sample

With 1 being : The image that I want displayed across the screen width (fit screen width)

and with 2 being : The div that I would want to place upon the image

Upvotes: 1

Views: 872

Answers (4)

Sandeep Mukherjee
Sandeep Mukherjee

Reputation: 771

what ever media query you use put every where

CSS:-
    .container{
    padding: unset;
    width:auto;
    }

i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me

Upvotes: 0

Abdullah Ahmed
Abdullah Ahmed

Reputation: 43

Why don't you use background: url()?

so new html now is:

<div id="container">
  <div id="divWithin">Testing</div>
</div>

and css:

#container {
    background: url("Your image url") no-repeat center center;
    background-size: cover;
}

learn more about background and background-size

Upvotes: 0

Matheus Barem
Matheus Barem

Reputation: 1627

To make a image responsive You need to use a class like this:

.responsive {
    width: 100%;
    height: auto;
}

If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp

Upvotes: 1

Tom_B
Tom_B

Reputation: 327

Try changing your css to this:

html, body {
  width: 100%;
}
#container {
  width: 100%;
  position: relative;
}
#imgWithin {
  width: 100%; 
}

#divWithin {
  position: absolute;
  top: 20%;
  left: 20%; 
  padding: 5px;
  background-color: white;
}

This will make the image the full width of the browser window with the text overlaid on top.

You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further

Upvotes: 0

Related Questions