0

For some reason, my images are being vertically distorted and I can't figure out as to why (See image below).

distorted images1

inspect element on distorted images2

inspect element on distorted images3

Long story short what I've done is moved all my single-page-app (SPA) app code/styles and created a server-side rendered codebase. I haven't changed any of the styles or tweaked anything, yet for some reason it's distorting. This is the working styles / code from the SPA app.

working HTML & CSS4

The only hack that seems to do much of anything is when I take out the

`height:100%;`

on the images, but this has a negative effect with filling out the images which is what I'm wanting.

css hack fix5

I'm using CSS Modules and have some idea that it could be related to some inheritance issues that I'm unaware of. Thanks in advance, this bug is really been driving me crazy.

I've created a fiddle that represents the working code from the SPA. https://jsfiddle.net/0L0rdk6y/

James LeBoeuf
  • 83
  • 1
  • 8
  • if you can share code example it will help us – Adnan Akram Jan 29 '18 at 09:45
  • Hi @AdnanAkram Please find fiddle. For your reference this is the working html/css, I'm unable to build a fiddle to represent the non-working one. https://jsfiddle.net/0L0rdk6y/ – James LeBoeuf Jan 29 '18 at 09:50
  • Can you share link where i can see actual issue as in fiddle it work perfectly fine – Adnan Akram Jan 29 '18 at 10:10
  • (This is not a solution imho) Have you tried to use the object-fit property? https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit – Andy Jan 29 '18 at 10:10
  • @Andy I think issue is we need to show 4 blocks in one row – Adnan Akram Jan 29 '18 at 10:13
  • Oh, now I got it, thanks! In that case, I think that there are always 8 blocks in a row(you can see it even from the fiddle expanding via drag and drop the window with the blocks). And this is because the class .item has a property flex-basis: calc(100/8) – Andy Jan 29 '18 at 10:20
  • For 'always' I mean for big screens – Andy Jan 29 '18 at 10:20

1 Answers1

0

Fixed this issue by adding 

<!DOCTYPE html>

in my render method when returning server side html

Example is 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> ;

James LeBoeuf
  • 83
  • 1
  • 8