How can I crate a fluid image, but with an aspect ratio that I decide? (lets say 16:9)
I've already made it fluid with max-width: 100%; but I cant change the aspect ratio.
Note: the image has a different aspect ratio most of the times.
You can wrapp your image in two containers. Give one container height:0 and a padding-top with the percentage you want for the height of your image in proportion to the width. So, for a height of 50% of the width use padding-top:50% and height:0, which - as explained here - will make the height proportional to the width by 50%.
.wrapper {padding-top:50%;height:0;position:relative;}
Inside of that container, you place another container with the following styling:
.inner{position:absolute;left:0;top:0;right:0;bottom:0;}
Now just place your image in the inner container and give it width:100% and height:100%
See fiddle: http://jsfiddle.net/henrikandersson/PREUD/1/ (updated the fiddle)