HTML image aspect ratio issue.

Hi.

How can I adjust it so the thumbnail boxes would keep the aspect ratio of the images?
Image related.



As you can see, the image boxes are all sized the same at the moment. Would be great if it would automatically adjust the box size to keep aspect ratio.

I'm using a free blogger template for my test blog, and here is the code for the thumbnail boxes:

/* thumb posts
----------------------------------------------*/

.post-summary {
    float: $startSide;
    overflow: hidden;
    margin: 10px;
    width: 300px;
    height: 230px;
    }

.post-summary h2 {
    display: block;
    position: relative;
    height: 230px;
    margin: 0;
    padding: 0;
    }

.post-summary a.thumbview {
    display: block;
    position: relative;
    overflow: hidden;
    height: 230px;
    padding: 0;
    color: #333;
    line-height: 1.2;
    border: none;
    }

.post-summary a:hover {
    text-decoration: none;
    }

.post-summary img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 280px;
    height: 210px;
    z-index: 2;
    border: 10px solid $bordercolor;
    }

.post-summary span.preview {
    position: absolute;
    top: 230px;
    left: 0px;
    z-index: 3;
    width: 280px;
    height: 210px;
    border-right: 10px solid $bordercolor;
    border-bottom: 10px solid $bordercolor;
    border-left: 10px solid $bordercolor;
    background: url(http://3.bp.blogspot.com/-94oen-enR5U/Td-n0OEBlhI/AAAAAAAABbo/YlgVB-ObpRg/s1600/texture70-body-bg.png);
    }

.post-summary span.title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 20px;
    line-height: 1;
    }

.post-summary span.linkview {
    position: absolute;
    top: 100px;
    left: 65px;
    padding: 10px 20px;
    line-height: 1.2;
    }

.post-summary span.linkview a {
    color: #222;
    }

.post-summary span.tag {
    position: absolute;
    top: 165px;
    left: 0;
    padding: 0px 20px;
    font-size: 12px;
    color: $bordercolor;
    }

.post-summary span.tag a {
    margin: 0;
    padding: 0 0 0 5px;
    font-size: 12px;
    border: none;
    text-shadow: none;
    color: $bordercolor;
    background: transparent;
    }

HTML:

 

That would be easy with Javascript but also can be done by css

Example

img {
  width:  75px; /* you can use % */
  height: auto; /* That is it will makes it fit */
}

HTML:

Another Example

This will make image shrink if it's too big at specified width/height

img {
    display: block;
    max-width:230px;
    max-height:95px;
    width: auto;
    height: auto;
}

HTML:

Hope it helps

 

Hello

Thank you very much! Adding 'auto' actually did the trick.
Do you know how can I get a border to these images that are slightly larger?
As you see, some images do not have bottom border.

 

cause your border is defined by exact width and height so since we made the height of the image as "auto" then we should did the same for the border css element.

but i do not know which element cause you didn't post the HTML code

 

Fourth time trying to post this > pastebin.com/vCLX67hp

There is full code for blog.

 

Anyone?
Please? :<

I need to have this blog up and running in 26 hours.
I'm unable to figure it out. This is the only thing left.