Images inside grid with width: 100% are too big.
Summary
When I put imgs into a display: grid parent and give them width: 100%, they end up being their original size, instead of 100% of the allocated space in the grid.
Operating system
Linux
Steps to reproduce
- Make a css grid
- Add some images (preferably large ones)
- Set
width: 100%on the images (this should make them as wide as the column they are in)
Expected behavior
The 100% width on the images should refer to 100% of the grid cell that they make.
Actual behavior
The images are at their original width instead of being the width of the cell.
URL for a reduced test case
https://psychpsyo.com/repro/ladybird/gridImageSize/
HTML/SVG/etc. source for a reduced test case
<style>
#cardGrid {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
img {
width: 100%;
aspect-ratio: 813 / 1185;
}
</style>
<div id="cardGrid">
<img src="https://crossuniverse.net/images/cards/en/U00072.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00075.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00075.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00075.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00074.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00074.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00073.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00073.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00073.jpg">
<img src="https://crossuniverse.net/images/cards/en/U00045.jpg">
</div>
<!-- shortened from https://psychpsyo.com/repro/ladybird/gridImageSize/ , should still work though -->Log output and (if possible) backtrace
None
Screenshots or screen recordings
Firefox / Chrome:
Ladybird:
Build flags or config settings
None
Contribute a patch?
- I’ll contribute a patch for this myself.
LadybirdBrowser / ladybird
Truly independent web browser
21.3k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too