Jump to content
Please Use CODE Tags

HTML - How to create same height responsive images

dwang040
By dwang040
in Programming
 Share
Posted

Trying to learn html and making a test website. Was wondering how can I have a row of images to be both responsive and have the same height. As of right now, I have two images (different sizes) in the patter "a, b, a, b, a." Right now, I've just set a hard limit under the img tag for a width and height of 15%. That gives me a responsive image, but obviously won't return the same height for the two images. If I remove that block of code img{}, then I'll get the same height, but the images won't be responsive since I've hard set the size in the div. How can I have both responsive and the same height? Tried some stuff online but the images were just displaying vertically.

 

I don't have any of the code I tried since I deleted it so here's the base code I'm working with. How could I make it so that the 2 images have the same height while also being responsive?  

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>Index</title>
</head>

<style>
    img {
        height: 15%;
        width: 15%;
    }

    body {
        background-image: url("unicorn.gif");
        background-size: 10%;
        background-repeat: repeat;
    }

    div {
        background-color: #008080;
        opacity: 1;
        position: center;
        margin-top: 76px;
        margin-right: 96px;
        margin-left: 96px;
        text-align: center;
    }
</style>

<body>
    <div>
        <h1>Welcome to my meme page.</h1>
        <h2>This is where I post random stuff.</h2>

        <img src="a.png" width="192" height="138">
        <img src="b.png" width="138" height="138">
        <img src="a.png" width="192" height="138">
        <img src="b.png" width="138" height="138">
        <img src="a.png" width="192" height="138">
    </div>
</body>

</html>

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Maybe try experimenting with "vh" and "vw" instead of giving width and height in %.

 

More info can be found here.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
18 minutes ago, kendoka said:

Maybe try experimenting with "vh" and "vw" instead of giving width and height in %.

 

More info can be found here.

Thank you for the suggestion. I modified it so the code now just looks like: 

img {
        height: 15vh;
    }

This has made it so that the images are the same height, however, they are no longer responsive. Of course, that's because I don't have a width statement in that code. But adding a width doesn't solve my issue either. 

img {
        height: 15vh;
        width: 15vw;
    }

Maximized vs Minimized

You'll notice that in the two images, the heights are changing responsively which is good, but this leads to unequal stretching between the two images. I'm trying to get it so the height is the same, but the image ratio stays the same. I'm also hoping to fit those 5 images on the same row. 

 

I've been trying to mess around with containers and flex, but for some reason, the spacing between each image is so far away, that with 5 images, they have shrunk down to the point where you can't even see them. Not really sure how to get flex working at this rate.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Don't set the dimensions of the image (apart from defining max values) set the dimensions of the container. An image will auto size within a div if you set the max-width or max-height property on the image. 

 

Then you just need to layout your divs. 

 

If this is for learning carry on, but if this is to make something you'll use then I recommend looking into a framework like foundation. They've already done all the hard work for responsive web pages. 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
5 hours ago, FlappyBoobs said:

Don't set the dimensions of the image (apart from defining max values) set the dimensions of the container. An image will auto size within a div if you set the max-width or max-height property on the image. 

 

Then you just need to layout your divs. 

 

If this is for learning carry on, but if this is to make something you'll use then I recommend looking into a framework like foundation. They've already done all the hard work for responsive web pages. 

Yes, this code is for learning. We're supposed to use HTML in a class so I thought I'd familiarize myself with it. This code is a bit outdated. I could have sworn I had replaced all my hard dimensions with percents or vh/ vw, but I guess I never copied the new code and just ended up pasting the old one. 

Here is the updated the code. I was able to get it to format I wanted with the help of a template online. However, I was wondering if there is a more exact way to get the ratio for .img1 and .img2. There's like a 2 pixel gap or something between the height of the images. Probably not that noticeable, but a little annoying. Any other important changes, notes, etc. I should think about/ make for better design? 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>Index</title>
</head>

<style>
    body {
        background-image: url("unicorn.png");
        background-repeat: repeat;
        background-size: 10%;
    }

    .container {
        background: #008080;
        margin-top: 10%;
        margin-right: 10%;
        margin-left: 10%;
        text-align: center;
    }

    img {
        width: 100%;
        height: auto;
    }

    .picsRow {
        display: flex;
    }

    .img1 {
        flex: 1.38955823293;
    }

    .img2 {
        flex: 1;
    }
</style>

<
<body>
    <div class='container'>

        <marquee><h1><big>Welcome to my meme page.</big></h1></marquee>
        <h2>This is where I post random stuff.</h2>

        <div class='picsRow'>
            <div class='img1'>
                <img src="sonyLogo.png">
            </div>
            <div class='img2'>
                <img src="vaporwave.gif">
            </div>
            <div class='img1'>
                <img src="sonyLogo.png">
            </div>
            <div class='img2'>
                <img src="vaporwave.gif">
            </div>
            <div class='img1'>
                <img src="sonyLogo.png">
            </div>
        </div>
    </div>
</body>

</html>

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×