Pictures are being distorted when being placed on my HTML

Question

Currently pictures are being placed into my website within a div container with a given width and height.

Some pictures are landscape, others are portrait.

Currently I give the images a static width and height using CSS to position it correctly inside it's container.

.winner .winner-image img {
    height: 159px;
    width: 143px;
}

However more often than note this distorts the picture.

What's the recommended way to display images without distorting them? Best practices?

Answer 1

Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.