0
 <div id="container">
 <img src="photo.png" alt="foobar" class="myphoto />
 </div>

 #container {
   padding 0;
   border: 1px solid #c8c8c8;
   width: 100%;
   }

 #container .myphoto {
  width: 100%;
  height: auto;
  }

When I do this, there's always a blank field between the photo and the bottom-border of the container-DIV (~ 3px). It looks like:

 #container {
  padding: 0 0 3px 0;
  }

Is there a trick?

Christoph
  • 123
  • 1
  • 3
  • 16
  • Can you do a jsfiddle? – martynas Mar 20 '14 at 08:55
  • 1
    add `#container .myphoto {display:block;}` – Pete Mar 20 '14 at 08:56
  • @Pete Way ahead of you! (by like 10 whole seconds!) – Ruddy Mar 20 '14 at 08:57
  • possible duplicate of [4 extra vertical pixels?](http://stackoverflow.com/questions/22510403/4-extra-vertical-pixels) – Hashem Qolami Mar 20 '14 at 08:58
  • @HashemQolami Don't get me wrong this could be found to be a dupe but for that one? The title of that could mean anything.... – Ruddy Mar 20 '14 at 08:59
  • @Ruddy `there's always a blank field between the photo and the bottom-border of the container` That's exactly the `4 extra vertical pixels` in my posted link. – Hashem Qolami Mar 20 '14 at 09:00
  • @HashemQolami You clearly didn't read what I said. If I had this problem I wouldn't search "4 extra vertical pixels". Its a very precise title name isn't it? It maybe the same problem but its not the best title to be found in search. – Ruddy Mar 20 '14 at 09:02

1 Answers1

1

Add display: block; to the img.

CSS:

 #container .myphoto {
     width: 100%;
     height: auto;
     display: block;
 }

DEMO HERE

Ruddy
  • 9,795
  • 5
  • 45
  • 66
  • @Christoph Yup, it happens but you learn from it and never run into the same problem again! – Ruddy Mar 20 '14 at 08:58