Resize Image Proportionally With Css

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Scale image proportionally within a div

The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)

#wrap {  border:1px solid #000000;  position: relative;  width: 50%;  height: 400px;  overflow:hidden;}#wrap > img {  width: 100%;  position:absolute;   top:50%;   transform: translateY(-50%);}

<div id="wrap">    <img src="http://lorempixel.com/800/800/city/1/" alt="Sample Image" /></div>

Is it possible to scale an image proportionally both on width and height based on a fixed container?

One way is to use object-fit:

img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}

JSFiddle Demo: https://jsfiddle.net/t75cxqt0/2/

Changing image sizes proportionally using CSS

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

Example:

HTML:

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

Resizing background image proportionally

I highly recommend Chris Coyier's Perfect Full Page Background trick.

The trick is setting the background-size property to cover, and the attachment property to fixed.

html {   background: url(images/bg.jpg) no-repeat center center fixed;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}