1

If I got an image, say 100*100px, what I want is to scale this image right into a region whose scale is 100*800px (just for test). I've tried to use max-height or max-width, but this will just scale the image proportionally, which can be seen here.

What should I do to stretch the image in order to make it fit into the region? Thanks a lot!

Judking
  • 6,111
  • 11
  • 55
  • 84
  • Possible Duplicate of: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only – Pain Jun 14 '14 at 14:58

3 Answers3

2

Heres what you can do. JsFiddle

Change your CSS code to:

img {
  width:50px;
  height:800px;
  background-size: 100%;
}

This will allow to image to stretch in order to fill the height/width

Let me know if this worked!

Pain
  • 185
  • 1
  • 2
  • 14
0

CSS 3 background-size:

contain

cover

100% 100%

will give you some variations on what you are talking about.

See here:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Marius George
  • 526
  • 2
  • 6
0

as you standard image will 100px by 100px; you can give your img an ID, then use the ID in your CSS to set the height en width. max-height or max-width will only set the maximum of both. not change it

#img {
  width:50px;
  height:800px;
}
Jordi van der Hek
  • 33
  • 1
  • 6