0

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 should be pretty straightforward, but I'm running into nothing but problems with it no matter how I try it.

At this moment I've got the following: 

<head>
    <link rel="stylesheet" href="Stylesheets/default.css">
</head>

<body>
    <div class="page">

        <div class="img-wrapper">
            <a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
        </div>

        <div class="img-wrapper">
            <a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
        </div>

    </div>

</body>


.page {
width: 100%;
height: 100vh;
white-space: nowrap;

}

.img-wrapper {
position: relative;
}

img {
float: left;
width: 50%;
height: 100vh;
}

This is achieving the height and width goals, but my tinkering so far has not gotten the image to adjust proportionally and tuck the overflow away.

I've searched around and come up with nothing that has solved this so far, apologies if I missed a super-obvious article somewhere. Any help is appreciated!

Josh
  • 3
  • 3

5 Answers5

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: 1 1 50%;
}

.img-wrapper a {
  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-child a {
  background-image: url(https://picsum.photos/300/200);
  background-position: top 0 right 100%;
  background-size: cover;
}
<body>
  <div class="page">
    <div class="img-wrapper">
      <a href="pol.html"></a>
    </div>
    <div class="img-wrapper">
      <a href="biz.html"></a>
    </div>

  </div>

</body>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
0

Try adding 

.page { overflow: hidden; }

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

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
0

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

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

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

        .img-wrapper a {
            display: block;
        }

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

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="page">

        <div class="img-wrapper">
            <a href="pol.html">
                <img src="Images/cal-engel-531490-unsplash.jpg">
            </a>
        </div>

        <div class="img-wrapper">
            <a href="biz.html">
                <img src="Images/rawpixel-660717-unsplash.jpg">
            </a>
        </div>
        <div class="clear"></div>
    </div>
</body>
Deepak gupta
  • 504
  • 1
  • 6
  • 22
0

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>
  <div class="page">
    <div class="img-wrapper">
      <a href="pol.html"><img src="https://picsum.photos/300/200"></a>
    </div>
    <div class="img-wrapper">
      <a href="biz.html"><img src="https://picsum.photos/300/200"></a>
    </div>

  </div>

</body>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

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>
        <link rel="stylesheet" href="Stylesheets/default.css">
    </head>

    <body>
        <div class="page">

            <div class="img-wrapper-l">
                <a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
            </div>

            <div class="img-wrapper-r">
                <a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
            </div>

            <div class="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;
}
Josh
  • 3
  • 3