MisutaaAsriel
Issue
Announcement images currently do not scale properly, due to the use of
<img />
. Instead,
background-image
on the parent DIV should be used, alongside
aspect-ratio
in portrait mode.
Problematic Code Example
  • Landscape
<div class="col-12 col-sm-6 col-md-6 col-lg-5 col-xl-5 d-none d-sm-block">
<img src="https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file" class="css-rlkrvh efpyl680">
</div>
  • Portrait
<div class="col-12 d-sm-none">
<img src="https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file" class="css-rlkrvh efpyl680">
</div>
Fixed Code Example
  • Landscape
<div class="col-12 col-sm-6 col-md-6 col-lg-5 col-xl-5 d-none d-sm-block" style="background: no-repeat center url('https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file'); background-size: cover;"></div>
  • Portrait
<div class="col-12 d-sm-none" style="background: no-repeat center url('https://api.vrchat.cloud/api/1/file/file_f400a4ff-aed6-4b81-a02f-db4c832a3db4/1/file'); background-size: cover; aspect-ratio: 16/9;"></div>
Explanation
  • Not all rendering engines handle
    <img />
    sizing the same way as
    <div />
    ; In WebKit, for example, a height of
    100%
    inside a flex-item causes the flex-item the image is within to
    scale to the height of the parent container.
    The image is sizing to
    100% the parent container and not the immediate parent which it is within.
  • DIVs however scale normally, and, for the seemingly desired implementation (image fills DIV, DIV is height of announcement in landscape and the width of the announcement in 16:9 in portrait), setting the
    background
    property with a separate
    background-size
    is preferable.
  • In this case, in both landscape and portrait, setting the
    background
    property of the DIVs, which originally contained the image, to
    no-repeat center ('image-url')
    ensures that they display the image as their background, center-aligned.
  • Setting the
    background-size
    to
    cover
    ensures that the image scales to fill the container
    without
    resizing it. This property cannot be set in the combined
    background
    property for compatibility reasons.
  • In portrait mode
    , setting the
    aspect-ratio
    property of the DIV containing the image to
    16/9
    allows the browser to intrinsically set its
    height
    to 9/16ths its
    width
    . Without this the image has a height of
    0
    .
  • In both cases, the
    <img />
    is removed entirely, as it is not needed.
Environment
  • macOS Sonoma
  • Safari 17.3 (19617.2.1.11.3)
  • WebKit
Attachments
  • Before and after pictures of an announcement, displaying both the problem, and the results of the fix.
March 9, 2024