CODEWITHSUNDEEP
htmlcssflexbox
Ole
Ole

Reputation: 46960

Getting images to stay inside the link elements within a flex container?

I'm trying to help a friend with this site. Specifically he wants the two images below the large image at the start of the page to align with the edge of the page, so that the edge of the right image aligns with the edge of the image above it.

I created the following mini demo. In it I have a flex container around the anchors with flex-basis set to 490px. However the images are not staying inside the anchor elements, nor the main column container with width: 1000px. We would like the images to be 490px wide, and the left image should align with the left edge and the right image should align with the right edge.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .kickers {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .kickers > a  {
        flex-basis: 490px;        
    }
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
    <div style="width: 1000px; height: 1000px; background-color: red;">
            <div class="kickers">
                    <a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
                        <img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
                    <a href="https://www.machinevisiondirect.com/swmo.html">
                        <img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
        </div>    
</body>
</html>

Thoughts?

Upvotes: 0

Views: 143

Answers (1)

stickyuser
stickyuser

Reputation: 2890

You were close, you just need to add a max-width of 100% to the images to stop them overflowing the container.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .kickers {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .kickers > a  {
        flex-basis: 490px;    
    }
    .kickers img {
        max-width: 100%;
    }
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
    <div style="width: 1000px; height: 1000px; background-color: red;">
            <div class="kickers">
                    <a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
                        <img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
                    <a href="https://www.machinevisiondirect.com/swmo.html">
                        <img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
        </div>    
</body>
</html>

Upvotes: 1

Related Questions