i cant make div or any image 100% in html5/css3

Question

earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides here's what I tried

 <html>
    <head>


    <style>

    .cont img {
        display: inline-block;
        width :100%;
        height : 100%;
        margin:0;
    padding:0;



    }    


    </style>




    </head>
    <body>
       <div class="cont">
    <img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">

    </div>
    </body>
</html>

what can I do to make it 100% with in any browser?

please add your html and full css to help you.. – Dory Zidon Jun 03 '15 at 06:45 — Dory Zidon, Jun 03 '15 at 06:45
Make sure your container element has `padding` set to 0. – TaoPR Jun 03 '15 at 06:47 — TaoPR, Jun 03 '15 at 06:47

score 1 · Answer 1 · answered Jun 03 '15 at 06:48

1

have a look at this code, set margin:0px on body tag

<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>

answered Jun 03 '15 at 06:48

shreyansh

1,637
4
26
46

Ritesh Karwa · Answer 2 · 2015-06-03T14:03:23.050

0

Assuming HTML

<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">

</div>
</body>

CSS

  .cont img {
    max-width: 100%;
    max-height: 100%;
}

edited Jun 03 '15 at 14:03

answered Jun 03 '15 at 06:46

Ritesh Karwa

2,196
1
13
17

Why don't you please explain your solution a little further? How come did you put your HTML that way? How is it relevant with the question? – TaoPR Jun 03 '15 at 06:49
I m just putting sample Html as the question doesn't have HTML in it – Ritesh Karwa Jun 03 '15 at 06:50
@user3292299 hope this helps – Ritesh Karwa Jun 03 '15 at 14:04

score 0 · Answer 3 · answered Jun 03 '15 at 07:40

0

Question is not 100% clear, but are you looking for a solution like this?

.container {
    height:100%;
    width: 100%;
    border: 1px red solid;
    margin:0;
    padding:0;
    line-height: 0;
}
.container .imgmy{
   height:100%;
    width: 100%;
    margin:0;
    padding:0;
}

answered Jun 03 '15 at 07:40

gamini2006

299
3
17

i updated with your html [here](https://jsfiddle.net/myL3v5f5/6/). set line-height: 0 on perant element ie div element – gamini2006 Jun 04 '15 at 07:49

score 0 · Answer 4 · edited May 23 '17 at 11:51

Are you sure it was good earlier?

The margins around the image have nothing to do with the image itself.

Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.

Luckily you can easily override these user agent stylesheets, and you should in this case.

You can add margin:0 to the body, as mentioned above by Shreya. But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/

Read more about User Agent Stylesheets here: What is user agent stylesheet

i cant make div or any image 100% in html5/css3

4 Answers4