1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

HTML image aspect ratio issue.

Discussion in 'HTML & Website Design' started by Chaos Proxy, Sep 1, 2013.

  1. #1
    Hi.

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

    [​IMG]

    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:


    HTML:
    1. /* thumb posts
    2. ----------------------------------------------*/
    3.  
    4. .post-summary {
    5.     float: $startSide;
    6.     overflow: hidden;
    7.     margin: 10px;
    8.     width: 300px;
    9.     height: 230px;
    10.     }
    11.  
    12. .post-summary h2 {
    13.     display: block;
    14.     position: relative;
    15.     height: 230px;
    16.     margin: 0;
    17.     padding: 0;
    18.     }
    19.  
    20. .post-summary a.thumbview {
    21.     display: block;
    22.     position: relative;
    23.     overflow: hidden;
    24.     height: 230px;
    25.     padding: 0;
    26.     color: #333;
    27.     line-height: 1.2;
    28.     border: none;
    29.     }
    30.  
    31. .post-summary a:hover {
    32.     text-decoration: none;
    33.     }
    34.  
    35. .post-summary img {
    36.     position: absolute;
    37.     top: 0px;
    38.     left: 0px;
    39.     width: 280px;
    40.     height: 210px;
    41.     z-index: 2;
    42.     border: 10px solid $bordercolor;
    43.     }
    44.  
    45. .post-summary span.preview {
    46.     position: absolute;
    47.     top: 230px;
    48.     left: 0px;
    49.     z-index: 3;
    50.     width: 280px;
    51.     height: 210px;
    52.     border-right: 10px solid $bordercolor;
    53.     border-bottom: 10px solid $bordercolor;
    54.     border-left: 10px solid $bordercolor;
    55.     background: url(http://3.bp.blogspot.com/-94oen-enR5U/Td-n0OEBlhI/AAAAAAAABbo/YlgVB-ObpRg/s1600/texture70-body-bg.png);
    56.     }
    57.  
    58. .post-summary span.title {
    59.     position: absolute;
    60.     top: 0;
    61.     left: 0;
    62.     padding: 10px 20px;
    63.     line-height: 1;
    64.     }
    65.  
    66. .post-summary span.linkview {
    67.     position: absolute;
    68.     top: 100px;
    69.     left: 65px;
    70.     padding: 10px 20px;
    71.     line-height: 1.2;
    72.     }
    73.  
    74. .post-summary span.linkview a {
    75.     color: #222;
    76.     }
    77.  
    78. .post-summary span.tag {
    79.     position: absolute;
    80.     top: 165px;
    81.     left: 0;
    82.     padding: 0px 20px;
    83.     font-size: 12px;
    84.     color: $bordercolor;
    85.     }
    86.  
    87. .post-summary span.tag a {
    88.     margin: 0;
    89.     padding: 0 0 0 5px;
    90.     font-size: 12px;
    91.     border: none;
    92.     text-shadow: none;
    93.     color: $bordercolor;
    94.     background: transparent;
    95.     }
    Solved! View solution.
    Chaos Proxy, Sep 1, 2013 IP
  2. #2
    That would be easy with Javascript but also can be done by css

    Example

    HTML:
    1. img {
    2.   width:  75px; /* you can use % */
    3.   height: auto; /* That is it will makes it fit */
    4. }
    Another Example

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

    HTML:
    1. img {
    2.     display: block;
    3.     max-width:230px;
    4.     max-height:95px;
    5.     width: auto;
    6.     height: auto;
    7. }
    Hope it helps
    nenen, Sep 1, 2013 IP
  3. Chaos Proxy

    Chaos Proxy Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    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.

    [​IMG]
    Chaos Proxy, Sep 1, 2013 IP
  4. nenen

    nenen Member

    Messages:
    91
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    35
    #4
    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
    nenen, Sep 1, 2013 IP
  5. Chaos Proxy

    Chaos Proxy Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    Fourth time trying to post this > pastebin.com/vCLX67hp

    There is full code for blog.
    Chaos Proxy, Sep 2, 2013 IP
  6. Chaos Proxy

    Chaos Proxy Member

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    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.
    Chaos Proxy, Sep 2, 2013 IP