Question

我想在网格中放置图像，根据窗口的宽度和高度调整大小。在保持纵横比的同时，它应该达到最大尺寸（最小尺寸，窗口高度或宽度）。基本上这样，图像可以在不偏离视野的情况下尽可能大。

我尝试在CSS中使用最小和最大高度组合而运气不佳。这是我现在使用的代码：

CSS：

    body {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    #tileContainer {
        width:95%;
        height:90%;
        margin:auto;
        background-color:#0F3;

        top:0;
        bottom:0;
        left:0;
        right:0;
        position:absolute;
    }

    .row {
        display:inline-block;
        width:100%;
    }

    .tileContainer {
        height:16%;
        width:20%;
        float:left;
    }

    .tileImage {
        width:100%;
    }

HTML：

<body>
<div id="tileContainer">
    <div class="row">
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
    </div>
    <div class="row">
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
        <div class="tileContainer">
            <img class="tileImage" src="http://placehold.it/500x500/" />
        </div>
    </div>
    </div>
 </body>

Answer 1

如果我正确理解您的问题，那么此解决方案可能适合您。

将CSS更新为： fiddle demo

 .tileContainer {
   height:16%;
   width:20%;
   min-width:75px; //set this to the smallest your want your images displayed at. 
   float:left;
 }

注意，通过设置min-width一旦窗口大小足够大，您的图像将会换行到下一行。

在不离开视图的情况下调整网格中的图像大小

1 个答案: