CODEWITHSUNDEEP
htmlcssimage
Only Bolivian Here
Only Bolivian Here

Reputation: 36743

Pictures are being distorted when being placed on my HTML

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?

Upvotes: 4

Views: 13930

Answers (5)

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.

To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that 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>

Upvotes: 2

kasimir
kasimir

Reputation: 1554

If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could 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 height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width

Upvotes: 1

Eric Petroelje
Eric Petroelje

Reputation: 60498

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.

Upvotes: 7

Nate B
Nate B

Reputation: 6356

To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.

Upvotes: 3

Related Questions