Div 1:1 与内部图像的比例，视口最大高度，无滚动条

Question

我正在尝试找到一种方法来执行以下操作：

有 2 个 div，每个都有一个图像作为子元素，每个都是当前视口宽度的 50%
以 1:1 宽高比缩放这两个 div 中的每一个，并尽可能填充每个 div 中的图像
永远不要让 div 变大（宽度或高度），以便我们在浏览器中获得滚动条..

我是在要求不可能的事情吗？或者在 css?

中有没有办法做到这一点？

例如，假设我的视口为 1800x700 像素。这意味着如果运行下面的代码，我的每个列的尺寸都将是 900x900。但是我的视口只有 700px 高度 = 我有滚动条..

.columns-ratio-slide-container{
    background-color: green;
    position: relative;
    height: 100%;

    .col-container{
        width: 50%;
        padding-top: 50%;
        position: relative;
        float: left;

        @include debug();
        .half{

            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            img{
                display: block;
                max-height: 100%;
                &.landscape{
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}

HTML结构：

<div class="columns-ratio-slide-container">
    <div class="col-container">
        <div class="half">
            <img src="https://placeholdit.imgix.net/480x640">
        </div>
    </div>

    <div class="col-container">
        <div class="half">
            <img src="https://placeholdit.imgix.net/640x320">
        </div>
    </div>
</div>

如果有帮助，请查看此图片...

Answer 1

您可以使用 "display: table-row" 和 "display: table-cell"

.columns-ratio-slide-container {
    background-color: green;
    position: relative;
    height: 100%;
    display: table-row;
}
.col-container{
    width: 50%;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.col-container img{
    display: block;
    max-height: 100%;
    width: 100%;
    height: auto;
}

<div class="columns-ratio-slide-container">
    <div class="col-container">
        <div class="half">
            <img class="landscape" src="http://placehold.it/480x640">
        </div>
    </div>

    <div class="col-container">
        <div class="half ">
            <img class="landscape" src="http://placehold.it/640x320">
        </div>
    </div>
</div>

Answer 2

您可以使用 50vw 和 100vh 来获得您想要的。这是一个示例代码片段：

编辑：使用flex布局将2个div放在水平中心位置并更新jsfiddle。另外，请描述如何处理页眉和页脚。

*
{
    margin:0;padding:0;
}
.parent {
  display: flex;
  justify-content: center;
}
div.container
{
    width: 50vw; 
    height: 50vw;
    max-height: 100vh;
    max-width: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}
.container1 {
  background-color: red;
  background-image: url('https://img3.doubanio.com/lpic/s4554820.jpg');
}
.container2 {
  background-color: green;
  background-image: url('http://pagead2.googlesyndication.com/simgad/10067268081911489671');
}

<div class="parent">
  <div class="container1 container"></div>
  <div class="container2 container"></div>
</div>

一个jsfiddle也做了。你可以调整view area的width/height，这2个div的纵横比总是1:1，不会出现滚动条。

如果需要页眉或页脚，可以在max-height和max-width上使用calc()，如：

max-height: calc(100vh - 80px); // 80px is the sum of header height and footer height.
max-width: calc(100vh - 80px);

Div 1:1 与内部图像的比例，视口最大高度，无滚动条

Div 1:1 ratio with image inside, with a viewport maxheight, no scrollbars

html

javascript

css

frontend