I'm new to web design and attempted to create a full-screen page with two images, but the outcome was less than ideal. Here's what I'm aiming for: A webpage where one image covers 50% of the horizontal browser window space, while the second image occupies the remaining portion on the right side. Both images should be responsive and maintain 100% height at all times, with cropping occurring on the left and right edges as the window is resized. This is similar to the layout seen here:
Is this a challenging task? I tried following online tutorials, but my images ended up stretched instead of cropped. Could it be that I need to create two columns and insert the images within them? Any guidance would be greatly appreciated.
Below is the current code snippet I've been working with:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}