gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:02:05 24 4
gpt4 key购买 nike

我想在网格中放置图像,该网格会根据窗口的宽度和高度调整大小以适合。它应该达到最大尺寸(这是最小尺寸,窗口高度或宽度),同时保持纵横比。基本上是为了在不超出视野的情况下使图像尽可能大。

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

http://jsfiddle.net/5JCBD/

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>

最佳答案

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

将您的 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 一旦窗口足够小,您的图像将换行到下一行。

关于html - 在不离开 View 的情况下调整网格中的图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21438679/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com