#1
  1. No Profile Picture

    Join Date
    Oct 2016
    Posts
    1
    Rep Power
    0

    Create same sized images


    Hi all,

    I'm wanting to take different sized pictures and place them next to each other as the same size (perhaps as thumbnails, or not?). Then, I'd like to be able to show an enlarged version when clicking on the image. I'd like to do this with straight HTML, if possible.

    For instance, I'm working with two images, one of which is 118x120, the other 83x120. How could I make them the same size, as in a thumbnail?

    If HTML won't allow this, would anyone be willing to teach me just enough CSS to accomplish this?

    Thanks.
  2. #2
  3. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,099
    Rep Power
    9644
    Showing an enlarged version when clicking will require some Javascript, but it's not a big deal.

    Those two images don't have the same aspect ratio - if you make them both the same size then one of them will be stretched. You should create a thumbnail, or at least make a cropped copy (meaning you'll have to cut off part of the image), at whatever size you want.
    Then it's just a matter of using the right <img>.
    Code:
    <img src="/path/to/image.jpg" width="83" height="120" alt="Summary or descriptive text about the image">
    Once that's in place you can worry about the "enlarged version" stuff.

    Comments on this post

    • Will-O-The-Wisp agrees
    Last edited by requinix; October 3rd, 2016 at 10:55 AM. Reason: *cropped
  4. #3
  5. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    348
    Rep Power
    91
    Hi there johnvicky,

    and a warm welcome to these forums.

    Here is an HTML/CSS example...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        text-align: center;
     }
    
    #cb1, #cb2 {
        position: absolute;
        left: -999em;
     }
    
    #lab1, #lab2 {
        display: inline-block;
        width: 5.19em;
        height: 7.5em;
        margin: 0.5em;
        border: 0.06em solid #000;
        vertical-align: top;
        box-shadow: 0.25em 0.25em 0.25em #999;
        overflow: hidden;
     }
    
    #lab1 img, #lab2 img {
        display: block;
        width: auto;
        height: 7.5em;
     }
    
    #cb1:checked~#lab1, 
    #cb1:checked~#lab1 img {
        width: 25.94em;
        height: auto;
     }
    
    #cb2:checked~#lab2, 
    #cb2:checked~#lab2 img {
        width: 36.88em;
        height: auto;
     }
    </style>
    
    </head>
    <body> 
    
    <input id="cb1" type="checkbox">
    <input id="cb2" type="checkbox">
    
    <label id="lab1" for="cb1">
     <img src="http://placehold.it/415x600" width="415" height="600" alt="">
    </label>
    <label id="lab2" for="cb2">
     <img src="http://placehold.it/590x600" width="590" height="600" alt="">
    </label>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

IMN logo majestic logo threadwatch logo seochat tools logo