CODEWITHSUNDEEP
csshtmlcontainers
Snorlax
Snorlax

Reputation: 4765

Image inside container overflow inside

Trying to make an image stretch and such inside a container, I can make it bigger then its container with overflow, but it gives me a scroll pad, I just want to make it bigger so I get the part oft he image I want inside the container:

http://jsfiddle.net/jo37L8cz/

div.img_box{
    width:400px;
    height:400px;

background-color:blue;
      overflow:auto;
}
    .img_box img{
     width:500px;
    }
<div class="img_box">
 <img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png" /></div>

Upvotes: 2

Views: 715

Answers (2)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

I think something like the following may work for you, using 

background-size:cover

https://jsfiddle.net/tonytansley/rgqvyrbr/1/

Upvotes: 1

evilunix
evilunix

Reputation: 960

div.img_box {
    width: 400px;
    height: 400px;
    background-color: blue;
    overflow: hidden;
}

.img_box img {
     width: 500px;
}

Upvotes: 3

Related Questions