Question

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

有2个div，每个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

您可以使用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。您可以调整视图区域的宽度/高度，这两个div的宽高比始终为1：1，并且不会出现滚动条。

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

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

Answer 2

您可以使用＆＃34; display：table-row＆＃34;和＆＃34;显示：table-cell＆＃34;

＆＃13;

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

＆＃13;

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

＆＃13;

与内部图像的比例为1：1，具有视口最大高度，无滚动条

2 个答案: