使图像填充 html/css答案

【问题标题】：making image fill html/css使图像填充 html/css
【发布时间】：2016-09-02 20:18:15
【问题描述】：

我的目标是一个包含 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/

【问题讨论】：

标签： html css

【解决方案1】：

建议解决方案

其实这是最简单的解决方案

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

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

右侧div占容器宽度的一半，并包含3个不同的divs，每个占右侧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.

【讨论】：

【解决方案2】：

您可以更改最大图像的高度以适应设备的窗口。尝试将其高度设置为“100vh”，也许这就是您要寻找的。

【讨论】：

【解决方案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/

【讨论】：