Announcement Images Improperly Scaled Due To <img />
complete
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 of100%inside a flex-item causes the flex-item the image is within toscale to the height of the parent container.The image is sizing to100% 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 backgroundproperty with a separatebackground-sizeis preferable.
- In this case, in both landscape and portrait, setting the backgroundproperty of the DIVs, which originally contained the image, tono-repeat center ('image-url')ensures that they display the image as their background, center-aligned.
- Setting the background-sizetocoverensures that the image scales to fill the containerwithoutresizing it. This property cannot be set in the combinedbackgroundproperty for compatibility reasons.
- In portrait mode, setting theaspect-ratioproperty of the DIV containing the image to16/9allows the browser to intrinsically set itsheightto 9/16ths itswidth. Without this the image has a height of0.
- 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.
![](https://canny.io/images/73d7f12d745d1b3f4bbdbfc3b1625cd7.png)
![](https://canny.io/images/084bea2a6e8ef49eb75139c6bef4bdc8.png)
![](https://canny.io/images/73e4092d90029d43e15bc32dce1f2b15.png)
![](https://canny.io/images/fab6ddf2b63c17b1541d2de2098c72a9.png)
Log In
This post was marked as
complete
This post was marked as
available in future release
Scout - VRChat Head of Quality Assurance
tracked