Welcome to Codidact Meta!
Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.
Post History
User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square...
#6: Post edited
by
luap42
·
2021-03-31T18:48:27Z (over 3 years ago)
#5: Post edited
by
Moshi
·
2020-10-08T03:48:56Z (about 4 years ago)
Retagged
#4: Post edited
by
Moshi
·
2020-10-07T22:27:49Z (about 4 years ago)
Syntax highlighting
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
- It looks like this should be fixable by applying the following CSS to the `img.header--item-image` class:
height: initial;width: initial;max-height: 40px;max-width: 40px;- (The CSS above can be freely used without any attribution required.)
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
- It looks like this should be fixable by applying the following CSS to the `img.header--item-image` class:
- ```css
- height: initial;
- width: initial;
- max-height: 40px;
- max-width: 40px;
- ```
- (The CSS above can be freely used without any attribution required.)
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
#3: Post edited
by
Canina
·
2020-10-07T18:51:40Z (about 4 years ago)
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
- It looks like this should be fixable by applying the following CSS to the `img.header--item-image` class:
- height: initial;
- width: initial;
- max-height: 40px;
- max-width: 40px;
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
- It looks like this should be fixable by applying the following CSS to the `img.header--item-image` class:
- height: initial;
- width: initial;
- max-height: 40px;
- max-width: 40px;
- (The CSS above can be freely used without any attribution required.)
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
#2: Post edited
by
Canina
·
2020-10-05T08:41:38Z (about 4 years ago)
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
It looks like this should be fixable by applying the following CSS to the `img.header--item-image`- height: initial;
- width: initial;
- max-height: 40px;
- max-width: 40px;
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
- User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
- It looks like this should be fixable by applying the following CSS to the `img.header--item-image` class:
- height: initial;
- width: initial;
- max-height: 40px;
- max-width: 40px;
- This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
- Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
- From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.
#1: Initial revision
by
Canina
·
2020-10-05T08:40:48Z (about 4 years ago)
User avatar image is stretched (image aspect ratio not maintained) in the top bar
User avatar images get stretched in the top bar because they are resized to a 1:1 aspect ratio (specifically 40x40 px) regardless of the image's actual aspect ratio. This isn't a problem for square or nearly-square images, but it is a problem for rectangular images.
It looks like this should be fixable by applying the following CSS to the `img.header--item-image`
height: initial;
width: initial;
max-height: 40px;
max-width: 40px;
This appears to be enough to keep the image aspect ratio intact, while imposing the current size (40x40 px, from `.header` etc.) as a maximum size restriction in either direction to maintain the layout.
Certainly applying these changes to the image *element* using the browser's developer tools makes a rectangular image look much better in the header.
From what I've been able to tell at a glance, the top bar is the only place where this is an issue; all other avatar image uses appear to respect the image's aspect ratio.