Maintain aspect ratio with height: auto;

[pmarsceill]

This PR fixes the Jekyll logo that was stretching when the browser was being resized:

Before (gross)

After (better)

[envygeeks]

I see no difference at all in those images. And if I have to do a rapid
switch test to see it then the difference is irrelevant as this isn't outer
space. This is based on the images in my email.

On Wed, Aug 17, 2016, 12:55 PM Patrick Marsceill notifications@github.com
wrote:

This PR fixes the Jekyll logo that was stretching when the browser was
being resized:
Before (gross)

[image: screenshot 2016-08-17 13 51 49]
https://cloud.githubusercontent.com/assets/896475/17747216/c543340e-6481-11e6-841c-1f7a23befd54.png
After (better)

[image: screenshot 2016-08-17 13 51 49]

https://cloud.githubusercontent.com/assets/896475/17747304/3d2a5d62-6482-11e6-9743-a7568a4c8a40.png

You can view, comment on, or merge this pull request online at:

#5254
Commit Summary

• Maintain aspect ratio with height: auto;

File Changes

• M site/_sass/_gridism.scss
  https://github.com/jekyll/jekyll/pull/5254/files#diff-0 (3)

Patch Links:

• https://github.com/jekyll/jekyll/pull/5254.patch
• https://github.com/jekyll/jekyll/pull/5254.diff

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#5254, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGFs6XY6IYYX-ezayX6IelCsffcL3clks5qg0sSgaJpZM4Jmt3K
.

[pmarsceill]

I see no difference at all in those images

Here is a zoomed in view of the logo so it's easier to see on your phone <3:

Aspect ratio stretched (production):

Aspect ratio maintained (this branch):

[benbalter]

LGTM.

Thanks for this @pmarsceill! Nice catch. Looks like before on mobile the Jekyll logo would be stretched to about twice its height? If there's no downside to merging, I think it would add a nice level of polish to the site on mobile (and would make a great first contribution to Jekyll, hopefully first of many!) Thanks again @pmarsceill. 😄

[aaronshekey]

It's not very noticeable in a single screenshot delivered via email. That's fair. However, very few users of Jekyll's site will be consuming it via a single screenshot delivered by email. For the rest of the users out there using resizable browsers, we should be making sure the logo isn't horizontally compressed when it doesn't need to be, especially when the fix is a one-liner with no consequences.

[envygeeks]

I'm still 👎, you are putting a bandaid on a single wound when there are 20 around it. If the image ends up expanding in any way because a browser is terrible at it's job, it's the headers fault for resizing itself and the fault of whoever designed the CSS, not the images fault which shouldn't need an explicit auto since modern browsers should implicitly set it...

[pmarsceill]

FWIW it is pretty standard to do fluid images this way:

• https://css-tricks.com/rundown-of-handling-flexible-media/#article-header-id-0
• https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_image.scss#L10
• https://github.com/zurb/foundation-sites/blob/a2745ae950da02bffa66b6b68c4ce768355a5d35/scss/_global.scss#L152

[envygeeks]

You are comparing flexible UI's to a static UI and expecting the same tricks to stand up under scrutiny. To the on-looker sure it works, it solves the problem, but it doesn't solve the actual problem, which is the header is shifting in some way it shouldn't, that is the real problem that is causing this.

[envygeeks]

I will concede though, I am unwiling to fix the problem myself, my backlog is already huge. So I guess I better either yeah you know the saying, it's LGTM.

[envygeeks]

@jekyllbot: merge +site

[pmarsceill]

I will concede though, I am unwiling to fix the problem myself, my backlog is already huge. So I guess I better either yeah you know the saying, it's LGTM.

Thanks. I'm More than willing to have a look at this.