Scale world logo Image to 100% width and auto height? about foundry-vtt-prettier-login-screen HOT 1 CLOSED

Hey! It already works pretty similar to what you outlined, essentially the CSS just scales the container in which the image is displayed, and the image itself is just a background-image whose size is set to contain, i.e. scale within the bounds of the container.

So if you want to influence the size of the logos, you'll need to adjust the size of either the login mask as a whole, or the individual image containers. The #join-game rule has a width declaration, that sets the width of the entire login mask including the header image. If you then also adjust the #join-game #world-title height, the image should re-size to fill the new space available. You can also resize just the header image by adding this to it's definition:

#join-game #world-title {
  ...
  width: 400%;
  margin-left: -150% !important;
}

The width property sets the width of the image container, and a negative margin-left property will move it horizontically so that you can re-centre it.

You should be able to adjust the size of the footer logo just by modifying the --login-footer-logo-height variable, as the container there is already set to 100% width of the copyright container and just limited by the height setting.

I've upgraded my Foundry to v11 yesterday which unfortunately broke the module, so I won't be able to test it properly before I port the CSS to the new version, but hopefully this will be soon!

from foundry-vtt-prettier-login-screen.