making image fill html/css

Question

I'm aiming for a page with a collage of 4 photos; a large one on the left taking up 50% width of the page and 100% of the height. 3 smaller photos, each taking up 50% of the width of the page but 33% of the height.

I'm running into problems with the larger image though,

my current CSS is;

.container {
width: 50%;
height: 100%;
overflow: hidden;
-size: cover;
}

and my html;

  <div class="container">
<img height="100%" width="100%" src="jpg"></img>
</div>

the image's 50% width is fine but the height is only 50%. It's a large image(4k) and my aim was to have overflow:hidden so that it fills the container but it's not working.

How could I do this?

Edit:

I'm aiming for it to be similar to this website:

http://www.masitupungato.com/

Jad Chahine · Accepted Answer · 2016-09-02 20:45:06Z

1

Suggested Solution

In fact, it is the easiest solution

Use two different divs, one for the left side and the other for the right side.

The left side div takes the half of the container width, and contains a image

The right side div takes the half of the container width, and contains 3 different divs, each one takes 33% of this right div height, and contains an image.

Use the CSS below:

.container {
    width: 250px;
    height: 250px;
    margin: auto;
}

#left {
    width: 50%;
    float: left;
    height: 100%;
}

#right {
    width: 50%;
    float: left;
    height: 100%;
}

.right-inner{
    width: 100%;
    height: 33%;
}

.left-inner {
  width: 100%;
    height: 100%;
}

Expected output

Check it out.

answered Sep 2, 2016 at 20:45

Jad Chahine

7,2159 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rusvelt2000 · Accepted Answer · 2016-09-02 20:48:31Z

0

You might change the height of the biggest image to fit the window of the device. Try to to set its height to "100vh", maybe it is what you were looking for.

answered Sep 2, 2016 at 20:48

Rusvelt2000

13 bronze badges

Comments

rmarif · Accepted Answer · 2016-09-02 20:53:19Z

you can use display:flex; property for this purpose. it will resolve your issue dynamically.

<div class="wrapper">
<div class="big-image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="small-image-wrapper">
<div class="image">
  <img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
    <div class="image">
  <img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
    <div class="image">
  <img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>

here is the fiddle https://jsfiddle.net/d95hw8fq/

Collectives™ on Stack Overflow

making image fill html/css

3 Answers 3

Suggested Solution

Expected output

Check it out.

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Suggested Solution

Expected output

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related