CSS 模块继承图像高度 100% 问题答案

【问题标题】：CSS Modules Inheritance Image Height 100% IssueCSS 模块继承图像高度 100% 问题
【发布时间】：2018-01-29 09:43:41
【问题描述】：

由于某种原因，我的图像被垂直扭曲了，我不知道为什么（见下图）。

长话短说，我所做的是移动了我所有的单页应用 (SPA) 应用代码/样式，并创建了一个服务器端呈现的代码库。我没有改变任何风格或调整任何东西，但由于某种原因它扭曲了。这是 SPA 应用程序的工作方式/代码。

似乎可以做很多事情的唯一黑客是当我取出

`height:100%;`

在图像上，但这会对填写我想要的图像产生负面影响。

我正在使用 CSS 模块，并且认为它可能与一些我不知道的继承问题有关。在此先感谢，这个错误真的让我发疯了。

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

【问题讨论】：

如果您可以分享代码示例，它将对我们有所帮助
嗨@AdnanAkram 请找小提琴。供您参考，这是工作的 html/css，我无法构建一个小提琴来代表非工作的。 jsfiddle.net/0L0rdk6y
你能分享链接，我可以在小提琴中看到实际问题，它工作得很好
（这不是解决方案恕我直言）您是否尝试过使用 object-fit 属性？ developer.mozilla.org/en-US/docs/Web/CSS/object-fit
@Andy 我认为问题是我们需要在一行中显示 4 个块

标签： html css image styling css-modules

【解决方案1】：

通过添加解决了这个问题

<!DOCTYPE html>

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

例子是返回<!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>;

【讨论】：