Maintain aspect ratio with height: auto; #5254

Merged
merged 1 commit into from Aug 17, 2016

Projects

None yet

6 participants

@pmarsceill
Contributor
pmarsceill commented Aug 17, 2016 edited

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

Before (gross)

screenshot 2016-08-17 13 51 49

After (better)

screenshot 2016-08-17 13 55 10

@pmarsceill pmarsceill Maintain aspect ratio with height: auto;
748b2f1
@envygeeks
Member

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

Patch Links:


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
Contributor

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):

screenshot 2016-08-17 15 44 03

Aspect ratio maintained (this branch):

screenshot 2016-08-17 15 45 47

@benbalter
Contributor

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
Member

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...

@envygeeks
Member

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
Member

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
Member

@jekyllbot: merge +site

@jekyllbot jekyllbot merged commit 1b36e9f into jekyll:master Aug 17, 2016

2 of 3 checks passed

continuous-integration/appveyor/pr AppVeyor build failed
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
jekyll/lgtm Approved by @benbalter and @envygeeks.
@pmarsceill
Contributor

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.

@pmarsceill pmarsceill deleted the pmarsceill:fix-logo-stretch branch Aug 17, 2016
@XhmikosR
Contributor

This change should be submitted upstream and also add a comment that's it's a custom change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment