How to make image on the full width of parent block?

Question

I have div block with img inside. I tried to make img on the full width of parent:

<div><img></div>

CSS

img {
  display: block;
  margin:0px
  position: relative
}

div {
  overflow: hidden
}

Answer 1

Block element takes full width of parent container, just your container doesn't have width.. and you must specify max-width of image because it will overflow container if it's larger

Like this :

 div{ width:200px; } img{ max-width:100%; } 

 <div> <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg"/> </div> 

Answer 2

img {
    max-width: 100%;
    position: relative; // fix for old IE browsers and some blackberry browsers like UC Browser.
    box-sizing: border-box; // fix for old operamini browsers and Get as Google preview
}