The CSS in the WAYF is forcing square logo's to be squashed vertically.
The logos are rendered like this:
<div aria-describedby="idp__titleremaining1" class="wayf__idp" data-connectable="true" data-index="1" data-count="0" tabindex="0" data-entityid="http://idp.example.com/" data-title="Example IdP" data-idpkey="http://idp.example.com/|2ad3124767dbf57b845ea2897febab8b342e2a8a067b179a33c76962cc35def3a4">
<div class="idp__logo">
<img src="https://static.surfconext.nl/media/idp/some_logo.png" alt="" loading="lazy">
</div>
<div class="idp__content">
<!-- [removed for clarity -->
</div>
</div>The size is configured on the outer <div class="idp__logo"> (rather than on the ![]()
itself) like this:
There are two issues here:
- the width and height are not equal
- if an image does not fit, is is squashed in on direction rather than scaled in two directions (keeping the aspect ratio).
This causes square logos (which we are moving towards in SURFconext) to be always squashed.
The effect is subtile but noticable. Compare current logo rendering (left) to correct logo (right), which was created by setting the <div> height to 5.67rem.
If possible, I'd prefer changing the logo height without changing the height of the entire IdP-button (so the screenshot above with the higher button is not the desired solution).
The CSS in the WAYF is forcing square logo's to be squashed vertically.
The logos are rendered like this:
The size is configured on the outer![]()
itself) like this:
<div class="idp__logo">(rather than on theThere are two issues here:
This causes square logos (which we are moving towards in SURFconext) to be always squashed.
The effect is subtile but noticable. Compare current logo rendering (left) to correct logo (right), which was created by setting the
<div>height to5.67rem.If possible, I'd prefer changing the logo height without changing the height of the entire IdP-button (so the screenshot above with the higher button is not the desired solution).