下面的代码显示了在Chrome 60和Firefox 55中调整窗口大小时的预期行为(但在iOS Safari 10.3中没有;这很可能是另一个问题,为什么它在Safari中行为不当)。
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
/*grid-template-rows: 1fr 1fr 1fr;*/
/*grid-template-rows: auto auto auto;*/
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 3px;
}
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>
被保留。我本来期望:
grid-template-rows: 1fr 1fr 1fr;
or:
grid-template-rows: auto auto auto;
使图像适合网格的行,但它们都不行。带有:
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
我得到期望的行为。如何避免自己计算数学?换句话说,我应该怎么做才能使grid-template-rows: 1fr 1fr 1fr;(或类似的东西)起作用?
在实际页面上用CSS计算容器元素的高度已经很困难。目标是通过CSS网格布局解决该问题;没有JavaScript,也没有背景图片骇客。
更新:我最初排除了背景图片骇客的原因有两个。
我认为(由于一些误解)背景图像url必须在CSS文件中,但事实并非如此:我可以使用内联样式并将其包含在HTML中。
感觉有点黑。在看到嵌套的弹性容器嵌套在网格容器中以使其能够在Safari上运行之后,它变得多么复杂和混乱之后,我简单地诉诸于背景图像黑客,因为它明显更干净并且可以在所有经过测试的浏览器(Chrome,Firefox,苹果浏览器)。
最后,不是解决问题的公认答案。
您已将图像设置为height: 100%。但是100%是什么?100%的容器?100%的视口?100%的行?如果是这样,那行的高度是多少?
Chrome和Firefox对您的意图进行了有根据的猜测。他们已经实施了旨在超出规范指导范围的算法,以改善用户体验。他们称这些修改为“干预”。
Safari不会这样做。Safari严格遵守规范语言,该规范语言规定元素上的百分比高度必须在父元素上具有定义的高度,否则将被忽略。
然后,您必须考虑默认情况下网格项不能小于其内容。如果将行设置为1fr,但是图像比分配的空间高,则行必须扩展。您可以使用min-height: 0/ min-width: 0或overflow使用除以外的其他任何值来覆盖此行为visible。
尽管如此,一旦您考虑了以上指南,您可能可以结合使用grid和flex属性使布局在Safari中工作:
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: lightgrey;
}
header,
footer {
flex: 0 0 100px;
background-color: tomato;
display: flex;
align-items: center;
justify-content: center;
}
.container {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
padding: 3px;
}
.tile {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 3px;
}
<header>HEADER</header>
<!-- The image is 200 x 100 px: a green and a blue square next to each other. -->
<div class="container">
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
<div class="tile">
<img src="https://i.stack.imgur.com/qbpIG.png" alt="." />
</div>
</div>
<footer>FOOTER</footer>
问题内容: 我有一个简单的2列布局,带有页脚,可清除标记中的右和左div。我的问题是我无法在所有浏览器中都将页脚停留在页面底部。如果内容将页脚放下,它会起作用,但并非总是如此。 问题答案: 要获得页脚的粘性: 有一个与您的内容。 右 前 收盘的的地方 。 权 后 收盘的的地方 。
问题内容: 我有以下标记: 我想要它,以便如果文本自动换行,就不会进入图像的“列”。我知道我可以用(我正在做的)做到这一点,但是由于这个原因这是行不通的。 我已经尝试了以下方法,但均未成功: 我也试过了。 谢谢。 编辑:我希望它看起来像这样: 不是这样的: 问题答案: 由于这个问题引起了广泛的关注,并且这是公认的答案,因此我认为需要添加以下免责声明: 该答案特定于OP的问题(示例中设置了宽度)。当
我正在为一个学校项目制作一个网站,希望模糊/审查一个图像,并让它在悬停时取消模糊/取消审查该图像,但我遇到了实现这一点的问题。 这是我的密码:
问题内容: 我有一个问题,我将一个图像设置为当鼠标悬停时显示另一个图像,但是第一个图像仍然出现,新的图像不会更改高度和宽度,而会与另一个图像重叠。我对HTML / CSS还是很陌生,所以我可能错过了一些简单的东西。这是代码: 问题答案: 一种解决方案是将第一个图像也用作背景图像,如下所示: 如果您的悬停图片大小不同,则必须将它们设置为:
有一个网格,我将一个图像控件放入网格中。我所做的:只需简单地将HorizontalAlignment和VerticalAlignment属性都改为“Center”。 然而,image控件的表现与其他控件不同。这个图像控制中心根据它的左上角如下所示: 我想知道它为什么会这样表现? 编辑这里是我的XAML: null 如果我设置margin=“-50,-50,0,0”这样的边距,它实际上是居中的,但是
我试图在使用CSS或SASS执行mouseover/mouseleave时更改图像。然而,为了完成这一点,我总是可以做到: 页眉=面板。getHeader()。getEl();然后这样做: 但是,我正在尝试使用CSS或SASS完成相同的功能。 基本上: a) 加载手风琴时,默认情况下应显示所有图像。(面板1应显示图1)。 b) 如果面板展开,则应显示图像2,如果面板折叠,则应显示图像1(在面板1上