CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Circuit 8
Circuit 8

Reputation: 479

display image with fixed width and height without warping/distorting

I have a page on my site which gets a load of images from the database and puts them in a grid.

The images are all different shapes and sizes.

What I want to do is display the images, each with the same width and height but without them becoming distorted.

right now my css is

.image{
 width:100px;
 height:100px
}

But obviously this leads to images being warped out of their normal dimensions.

I can't just set the height or width because I want the whole 100x100 px block to be filled with image.

I guess I need to create something which makes new image thumbnails out of the original images. Would I have to actually edit the image files when they are copied to the server? Or is there some javascript I could do which could display the images like this.

Thanks in advance!

Upvotes: 0

Views: 1150

Answers (1)

lukehemingway
lukehemingway

Reputation: 72

.image{
min-height:100px;
height:100px;
min-width:100px;
width:100px;
}

or create div around the images with a height of 100px and a width of 100px.

Upvotes: 1

Related Questions