CSS模块继承图像高度100％问题

Question

由于某些原因，我的图像在垂直方向上失真了，我无法弄清原因（请参见下图）。

长话短说，我所做的就是移动所有单页应用（SPA）应用代码/样式，并创建了服务器端呈现的代码库。 我没有更改任何样式或进行任何调整，但是由于某种原因，它会失真。 这是SPA应用程序的工作样式/代码。

唯一看起来无所不能的技巧是当我取出

`height:100%;`

在图像上，但这对填充图像有负面影响，这正是我想要的。

CSS hack修复 5

我正在使用CSS模块，有些想法可能与我不知道的某些继承问题有关。 预先感谢，这个错误确实让我发疯。

我创建了一个小提琴，代表了SPA中的工作代码。 https://jsfiddle.net/0L0rdk6y/

Answer 1

通过添加解决此问题

<!DOCTYPE html>

返回服务器端html时在我的render方法中

示例为return <!DOCTYPE html> <html> <head> ${renderBaseMeta()} ${helmet.title.toString()} ${helmet.meta.toString()} <link rel="stylesheet" href="main.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <div id="root">${content}</div> <script> window.INITIAL_STATE = ${serialize(store.getState())} </script> <script src="bundle.js"></script> </body> </html> ;

CSS模块继承图像高度100％问题

问题描述

1 个解决方案

解决方案1
0 2018-01-31 23:02:03

CSS模块继承图像高度100％问题

问题描述

1 个解决方案

解决方案1 0 2018-01-31 23:02:03

解决方案1
0 2018-01-31 23:02:03