我需要一个具有最近邻调整大小的图像渲染，而不是当前使用的双三次方式。我目前使用以下内容：

ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

这可以在IE和Firefox中使用，但不适用于Chrome和Safari。是否有任何webkit替代方案或任何其他方式来实现这一效果？

编辑：现在可以使用图像渲染：-webkit-optimize-contrast ;.

https://developer.mozilla.org/en-US/docs/CSS/image-rendering#Examples

这在当前版本的Chrome中无效，以下是一些有用的链接：

> http://vaughnroyko.com/state-of-nearest-neighbor-interpolation-in-canvas/
> Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

我没想到有办法。

而一些Google搜索器却很快就证实了这一点。 webkit image interpolation的顶级Google结果是：

http://code.google.com/p/chromium/issues/detail?id=1502

2008年9月报道，仍未解决。

还有：https://bugs.webkit.org/show_bug.cgi?id=40881

如果我需要这个，我可能会编写一个PHP脚本来使用最近邻居来动态地放大图像。

这将在每个浏览器中工作，但是您有所有额外的处理和传输开销。

我想要一个具有特定高度的垂直菜单。

每个孩子必须填充父级的高度，并且具有中间对齐的文本。

孩子的数量是随机的，所以我必须使用动态值。

Div .container包含一个随机数的子元素(.item)，总是必须填充父元素的高度。为了实现我使用flexBox。

为了使文本对齐到中间的链接我使用display：table-cell技术。但是使用表格显示需要使用100％的高度。

我的问题是.item-inner {height：100％}在webkit(Chrome)中不工作。

>有这个问题的修复吗？
>或者有一个不同的技术，使所有.item填充父的高度与文本垂直对齐到中间？

Example here jsFiddle,should be viewed in Firefox and Chrome

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div>
  <div>
    <div>
      <a>Button</a>
    </div>
  </div>

  <div>
    <div>
      <a>Button</a>
    </div>
  </div>

  <div>
    <div>
      <a>Button</a>
    </div>
  </div>
</div>

问题

My problem is that .item-inner { height: 100% } is not working in
webkit (Chrome).

它不工作，因为你使用百分比高度不符合规范的传统实现的方式。

07000

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated Box’s
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned,the value computes to auto.

auto
The height depends on the values of other properties.

换句话说，对于在流内子级上工作的百分比高度，父级必须具有设置的高度。

在你的代码中，顶层容器有一个定义的高度：.container {height：20em; }}

第三级容器具有定义的高度：.item-inner {height：100％; }}

但是在它们之间，二级容器 – .item – 没有定义的高度。 Webkit将其视为缺少链接。

.item-inner告诉Chrome：给我高度：100％。 Chrome查找父(.item)以供参考，并做出回应：100％的什么？我没有看到任何东西(忽略flex：1规则是那里)。因此，它应用height：auto(content height)，根据规范。

另一方面，Firefox现在接受父级的flex高度作为孩子的百分比高度的参考。 IE11和Edge也接受弯曲高度。

此外，如果与flex-basis(任何值工作，包括flex-basis：0)结合使用，Chrome将接受flex-grow作为足够的父引用。然而，在写这篇文章的时候，这个解决方案在Safari中失败了。

#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

解决方案

1.在所有父元素上指定高度

可靠的跨浏览器解决方案是在所有父元素上指定高度。这可以防止缺少链接，基于Webkit的浏览器会认为违反了规范。

请注意，min-height和max-height是不可接受的。它必须是height属性。

CSS相对和绝对定位

应用位置：相对于父级和位置：绝对到子级。

大小绝对定位的孩子与高度：100％和宽度：100％，或使用偏移属性：顶部：0，右：0，底部：0，左：0。

使用绝对定位，百分比高度在父级上没有指定高度。

3.删除不必要的HTML容器(推荐)

是否需要两个容器周围按钮？为什么不删除.item或.item-inner，或两者？虽然button elements sometimes fail as flex containers，它们可以是flex项目。考虑使按钮成为.container或.item的子对象，并删除无偿标记。

这里有一个例子：

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div>
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

4.嵌套Flex容器(推荐)

去除百分比高度。删除表属性。摆脱vertical-align。避免绝对定位。只要坚持flexBox一路通过。

将display：flex应用于flex项(.item)，使其成为flex容器。这会自动设置align-items：stretch，它告诉孩子(.item-inner)展开父节点的整个高度。

尝试此操作(无需更改HTML)：

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div>
  <div>
    <div>
      <a>Button</a>
    </div>
  </div>

  <div>
    <div>
      <a>Button</a>
    </div>
  </div>

  <div>
    <div>
      <a>Button</a>
    </div>
  </div>
</div>

jsFiddle

更多信息

在CSS中通常如何工作的百分比：

> Working with the CSS height property and percentage values

使用父级的flex高度作为子级百分比高度的参考的Firefox和IE示例：

> Chrome ignoring flex-basis in column layout
> Height is not correct in flexbox items in Chrome
> Flexbox in Chrome–How to limit size of nested elements?
> min-height inside a flex item is being ignored in chrome

我正在尝试设置一个设计,这是一个很大的问题.这是一个参考网站;

http://throwbackhero.com/index1.php

问题是我将身体设置为高度：100％;在样式表和#wrapper div中也是如此.高度偏离当前页面高度,并没有考虑到其他div可能导致溢出.

我想,即使浏览器的垂直大小发生变化,空白页面也是浏览器的大小,内容/包装器div将缩小以适应.

可以这样做吗？

编辑

好的,我原来的问题非常混乱.这是一张照片;

所以,在图1(左)是问题.高度100％;在包装器和内容div上,它正在创造那个坏孩子.我希望它看起来像图片,白色/灰色区域根据浏览器的大小增长/缩小…

最简单的方法就是使用CSS：

height: 100vh;

其中’vh’代表浏览器窗口的垂直高度.响应调整浏览器和移动设备的大小.