38

I have a large image. I want to display it on its on own a web page, and when doing this without any CSS it fills the whole page and is too big to display at once (scroll bars appear). I want to scale it down so it fits the height of the user's screen (not the width). I've found solutions but these stretch the image to fit the whole of the screen -- I don't want this as it ruins the aspect ratio.

Basically, I want to resize an image while keeping the aspect ratio. How do I do this?

user1447941
  • 3,675
  • 10
  • 29
  • 34
  • http://stackoverflow.com/questions/10559058/resize-view-width-preserve-image-aspect-ratio-with-css – 001 Sep 07 '12 at 15:10
  • Simply specify the height and leave the width property as is. – knittl Sep 07 '12 at 15:11
  • This is a repeated topic with an already solution. https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Hernan Gil Jan 14 '18 at 20:07

4 Answers4

47

Just set the width to auto:

img {
   width: auto;
   max-height: 100%;
}

Here's the fiddle: http://jsfiddle.net/6Y5Zp/

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • How can I automatically adjust the height to fit the best possible aspect ratio depending on the size of the image? – user1447941 Sep 07 '12 at 15:11
  • If you want to adjust the width: width: 100% and height: auto instead – speeder Feb 18 '16 at 17:41
  • This is the simplest solution, but it has one limitation: It requires scaling the image to either a fixed width _or_ a fixed height. This will always result in a properly scaled image, but one of the dimensions may have content which is cutoff. The answer by @Hoffman would seem to avoid this. – Tim Biegeleisen Dec 14 '16 at 10:03
  • Currently I can't see that image fits the height in the fiddle. Actually it is placed to the page as-is without any scaling. But providing fixed height for container (`body` in this case) solves the problem. Here is modified fiddle: [http://jsfiddle.net/diamondex/v49dc3fe/1/](http://jsfiddle.net/diamondex/v49dc3fe/1/) – Ruslan Zhomir Aug 01 '17 at 18:33
23

here is the sample one

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
AKHIL P
  • 1,261
  • 1
  • 9
  • 5
7

You can use a div with background-image and set background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally. Just don't forget to set the sizes on the css since divs don't have the width/height attribute on the tag itself.

The background-size property is ie>=9 only though.

Hoffmann
  • 14,369
  • 16
  • 76
  • 91
0

I think you need to paste a class inside the image you want to show like this

< image  class="image" >

and this is the class

.image 


 text align: center
 max width:pixels you want
 max height pixels you want

but make sure that both are the same quantity that way wont get out of the screen in height and width.

or you can play with the width and the height

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
jose
  • 25
  • 1