Two Images, Side By Side Responsive

November 28, 2023 Post a Comment

The end goal of this landing page is to have two images side-by-size, both 100% height, but 50% width, maintaining the aspect ratio and hiding the overflow. This seems like it shou

Solution 1:

I would just make them background images. That way you don't have to worry about overflow. Here I'm setting the anchor to 100% width and height (of its container, so 50% of the page each), which appears to be what you wanted. The background-position keeps the left and right images anchored at the top right and top left respectively, and the background-size of cover ensures the aspect ratio is kept intact. Note that if your images are taller than they are wide, this might not have the effect intended.

body {
  margin: 0;
}

.page {
  width: 100%;
  height: 100vh;
  font-size: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
}

.img-wrapper {
   flex: 1150%;
}

.img-wrappera {
  display: block;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
}

.img-wrapper:first-child a {
  background-image: url(https://picsum.photos/300/200);
  background-position: top 0 left 100%;
  background-size: cover;
}

.img-wrapper:last-childa {
  background-image: url(https://picsum.photos/300/200);
  background-position: top 0 right 100%;
  background-size: cover;
}

<body><divclass="page"><divclass="img-wrapper"><ahref="pol.html"></a></div><divclass="img-wrapper"><ahref="biz.html"></a></div></div></body>

Solution 2:

Try adding

.page { overflow: hidden; }

to your code. This should hopefully ensure that any overflowing content is hidden.

Solution 3:

You have given width:50% to the image instead of its parent element.

<head><linkrel="stylesheet"href="Stylesheets/default.css"><style>.page {
            width: 100%;
            height: 100vh;
            white-space: nowrap;
        }

        .img-wrapper {
            position: relative;
            float: left;
            width: 50%;
        }

        .img-wrappera {
            display: block;
        }

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

        .clear {
            clear: both;
        }
    </style></head><body><divclass="page"><divclass="img-wrapper"><ahref="pol.html"><imgsrc="Images/cal-engel-531490-unsplash.jpg"></a></div><divclass="img-wrapper"><ahref="biz.html"><imgsrc="Images/rawpixel-660717-unsplash.jpg"></a></div><divclass="clear"></div></div></body>

Solution 4:

Use flex and give its child elements 50% width. Remove the default margin on body. And to remove white space due to images add font-size:0 on the .page div. You can obviously ovverride this font-size later when you have text on this page for that section.

body {
  margin: 0;
}

.page {
  width: 100%;
  height: 100vh;
  font-size: 0;
  display: flex;
}

.img-wrapper {
  width: 50%;
}

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

<body><divclass="page"><divclass="img-wrapper"><ahref="pol.html"><imgsrc="https://picsum.photos/300/200"></a></div><divclass="img-wrapper"><ahref="biz.html"><imgsrc="https://picsum.photos/300/200"></a></div></div></body>

Solution 5:

Here is the solution that I reached. The main issue that I was having was that I had assigned

width:50%

to img instead of the container.

Here are the final(ish) code blocks that are working as intended. Thanks for the suggestions!

<!DOCTYPE html><html><head><linkrel="stylesheet"href="Stylesheets/default.css"></head><body><divclass="page"><divclass="img-wrapper-l"><ahref="pol.html"><imgsrc="Images/cal-engel-531490-unsplash.jpg"></a></div><divclass="img-wrapper-r"><ahref="biz.html"><imgsrc="Images/rawpixel-660717-unsplash.jpg"></a></div><divclass="clear"></div></div></body>

html, body {
    height: 100%;
    margin: 0;
}

#wrapper {
    min-height: 100%; 
}

.page {
    width: 100%;
    max-height: 100vh;
    white-space: nowrap;
    overflow: hidden;
}

.img-wrapper-l {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
    float: left;
}

.img-wrapper-r {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: relative;
    float: right;
}

img {
    height: auto;
    width: auto;
    max-width: 1200px;
    max-height: 1200px;
}

Html5 Programming Language