帶有內部圖像的div 1：1比例，視口最大高度，無滾動條

Question

我正在嘗試找到一種方法來執行以下操作：

1. 有2個div，每個div都有一個圖像作為子元素，每個div的當前視口寬度為50％
2. 以1：1的寬高比縮放兩個div的每個div，並讓每個div內的圖像盡可能好地填充
3. 切勿將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 。 您可以調整視圖區域的寬度/高度，這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);

Answer 2

您可以使用“顯示：表格行”和“顯示：表格單元格”

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