使图像填充html / css

Question

我的目标是一张包含4张照片拼贴的页面; 左边的一个大的占据页面宽度的50％和高度的100％。 3张较小的照片，每张照片占据页面宽度的50％，但高度为33％。

我遇到了较大图像的问题，

我目前的CSS是;

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

和我的HTML;

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

图像的50％宽度很好但高度仅为50％。 这是一个大图像（4k），我的目标是溢出：隐藏，以便它填充容器，但它不起作用。

我怎么能这样做？

编辑：

我的目标是与本网站类似：

http://www.masitupungato.com/

Answer 1

建议的解决方案

事实上，这是最简单的解决方案

使用两个不同的div s，一个用于左侧，另一个用于右侧。

左侧div占据容器宽度的一半，并包含图像

右侧div占据容器宽度的一半，包含3个不同的div s，每个占据此右侧div高度的33％，并包含图像。

使用下面的CSS：

.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%;
}

预期输出

<强>

<强> Check it out.

Answer 2

您可以更改最大图像的高度以适合设备的窗口。尝试将其高度设置为＆＃34; 100vh＆＃34;，也许这就是你要找的东西。

Answer 3

你可以使用display：flex;为此目的的财产。它会动态解决您的问题。

<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>

这里是小提琴https://jsfiddle.net/d95hw8fq/