Question

我尝试使用方形图像制作响应式网格，但第一个方形图像需要是其他图像的两倍。我可以用jQuery做到这一点，但我想用css修复它，如果可能的话。

网格这是网格的一个例子。红色方块是带有图像的div：

enter image description here

我认为它可行的方式

我觉得这很简单：如果每个div的宽度为20％，则：first-item应为40％。所有div的高度都是自动的，因为所有图像都是500 x 500像素。因此，高度缩放两倍是合乎逻辑的。

令我惊讶的是，它并不适用于所有屏幕尺寸。在一些屏幕上，第一个div是1像素到大。示例：当第一张图像的高度为533像素时，第一张图像旁边的图像的高度为266像素。这意味着第一个图像是1像素到大（266 x 2 = 532）。所以带图像的第三行出错了。

以下是在线网格的示例：http://bit.ly/LKdKMj将浏览器缩放到较小的尺寸，您可以看到图像的行为。

有人知道为什么这不起作用吗？

我在下面添加了HTML和CSS。

非常感谢，

Wnd中

HTML：

<div class="container">

    <header id="header">
    </header>

    <nav id="leftmenu">
    </nav>

    <section id="content">
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
            <article class="item">
                <img src="img/item.jpg" alt=""/>
            </article>
    </section>

</div>

CSS：

html, body{margin: 0; padding: 0;}

#header{
    width: 100%;
    height: 100px;
    background: #222;
}

#leftmenu{
    height: 1000px;
    width: 20%;
    float: left;
    background: #505050;
}

#content{
    width: 80%;
    float: left;
}
#content .item{
    float: left;
    padding: 0px;
    margin: 0px;
}
#content .item img{
    width: 100%;
    display: block;
    height: auto;
}

/*GRID*/

@media only screen and (max-width: 2700px) {

  #content .item:first-child{width: 25%;}
  #content .item{width: 12.5%;}

}

@media only screen and (max-width: 1920px) {

  #content .item:first-child{width: 40%;}
  #content .item{width: 20%;}

}

@media only screen and (max-width: 1400px) {

  #content .item:first-child{width: 50%;}
  #content .item{width: 25%;}

}

@media only screen and (max-width: 1024px) {

  #content .item:first-child{width: 66.66666%;}
  #content .item{width: 33.33333%;}

}

@media only screen and (max-width: 720px) {

  #content .item:first-child{width: 66.66666%;}
  #content .item{width: 33.33333%;}

}

@media only screen and (max-width: 520px) {

  #content .item, #content .item:first-child{width: 50%;}

}

Answer 1

你永远无法确定百分比。我相信一个解决方案是永远不会100％。而是使用类似的东西：例如width:25%-2px，

或针对较小的百分比（不是100％而是99％）所以你的div应该是例如：39.5％+ 19.5％+ 19.5％+ 19.5％而不是40％+ 20％+ 20％+ 20％（这些数字仅用于演示，不适用于您的特定代码）

Answer 2

您可以使用与宽度相同的填充底部来使文章标签成为正方形。这将使他们始终保持正方形。

#content .item{
    position: relative;
    float: left;
    margin: 0px;
    width: 40%;
    padding-bottom: 40%;
}

然后你可以用一些绝对定位将图像放在里面

#content .item img{
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

检查这个小提琴。我用占位符替换了空图像标签，以获得更好的可视化效果。

http://jsfiddle.net/Haroldchen/LWR3X/

带有奇数像素的图像比例？

2 个答案: