javascript - Div 1 :1 ratio with image inside,，视口(viewport)最大高度，无滚动条

Question

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

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

我是在要求不可能的事情吗？或者有没有办法在 css 中做到这一点？

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

.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

您可以使用 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>

A jsfiddle也做了。您可以调整 View 区域的宽度/高度，这 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);