full-screen fit images in two columns - html

Question

I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}

Answer 1

The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.