Using a display: inline-block; wrapper, it’s possible to make this happen with CSS only.

HTML

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}​

http://jsfiddle.net/MBLyT/1/

<div class="holder">
    <img src="http://lorempixel.com/400/200/" class="width30"/>
</div>

<div class="holder">
    <img src="http://lorempixel.com/400/200/" class="width50"/>
</div>

<div class="holder">
    <img src="http://lorempixel.com/400/200/" />
</div>

.holder {   
  width: auto;
  display: inline-block;    
  border: 1px solid red;
  margin: 10px;
}

.width30 {
  width: 30%; 
  height: auto;    
}


.width50 {
  width: 50%;
  height: auto;    
}

If you need a quick inline solution:

<img style="max-width: 100px; height: auto; " src="image.jpg" />

https://stackoverflow.com/questions/3380252/how-to-create-proportional-image-height-width