CODEWITHSUNDEEP
htmlcss
Dev
Dev

Reputation: 1073

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

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
}

Upvotes: 1

Views: 355

Answers (2)

user5125586
user5125586

Reputation: 

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
}

Upvotes: 0

Marko Mackic
Marko Mackic

Reputation: 2333

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>

Upvotes: 2

Related Questions