Images are distorted when placed on my HTML

Question

Currently, images are hosted on my website in a div container with a given width and height.

Some shots are landscape, others are portrait.

I am currently giving images a static width and height using CSS to fit it correctly inside the container.

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

However, most often this distorts the image.

What is the recommended way to display images without distorting them? Best practics?

Answer 1

Without any server-side code, in order to actually determine the height and width of the image, the best idea would be to set EITHER height or width, but not both. This will result in a proportional resizing of the image. Which dimension you want to limit will depend on your site layout.

Answer 2

In order not to distort them, images should have their own height and width (or proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.

Answer 3

You can add an external element (span or div) with a fixed size, and this element does not display overflowing content.

To guarantee the resizing of your images, you can also set the height or width for the images to match the size of the wrapping div (you need to assign only one value so that the images are not distorted.

 <style> .img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;} .img-wrapper img {height:159px;} </style> <div class="img-wrapper"> <img src=""> </div> 

Answer 4

The best way is to sketch your image after uploading it to the server. The thumbnail should be 159x143 px, but if you need to display images, now you can set the div to a fixed width using the css property "overflow: hidden"; and just set the image height. don't touch the width

Answer 5

If it is important that all images are displayed in the same size and you do not want to distort them, you should crop them to achieve the best result. Otherwise, you can wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If the height and width can differ in images, then go to the solutions already mentioned, that is, set the height or width.