html - 每行 6 个图像，无论屏幕大小如何，图像大小调整 - html css3

Question

我正在尝试实现两行图像(即第一行 6 个图像和第二行 6 个图像)。当我的屏幕尺寸在 320px 和 480px 之间时，它满足了我的要求。但是，我无法针对其他屏幕进行调整。

请在此处查看此链接:sample html page

我在这里发现了一个类似的问题 --> stackoverflow qs

但是，这是一个不同的实现。理想情况下，我希望两行图像保持原样，但当我的屏幕尺寸增加时，图像的尺寸应该变大。

任何实现此类解决方案的技巧/想法或资源都将不胜感激。

谢谢!

Answer 1

我不太确定您的问题，如果您编写代码，请提供一些有用的代码。无论如何我会去做这样的事情:

CSS

#image {
    min-width: 320px; /*Sets a width of 320px*/
    width: 16.66%; /*If page gets bigger the image will become 1/6 of page's width*/
}

基本上，设置 min-width，然后将其设置为您希望的页面百分比。 width 将仅在min-width 为真时使用。

编辑

我刚刚意识到我的回答有点完全错误(疲劳是一个因素)。考虑以下示例:

HTML

<div id="holder">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
</div>

CSS

#holder {
    min-width: 320px;
    width: 100%;
}

.image {
    width: 16.66%;
    position: relative;
}

简单来说，这将使 6 张图像的最小宽度为 320px。现在，如果屏幕尺寸小于 320px，#holder(保存图像的元素)将离开页面。然而，如果页面变得比 320px 大，那么每个图像将占用 #holder 宽度的 16.66% (1/6) ，这是页面宽度的 1/6。因此，使用这两个组合值，您可以使图像扩展，但绝不会小于。