Center non-square avatar pictures
This commit is contained in:
parent
4b566e0a19
commit
c68d65ea0b
3 changed files with 9 additions and 0 deletions
BIN
fixtures/wide.jpg
Normal file
BIN
fixtures/wide.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 50 KiB |
|
@ -29,6 +29,7 @@
|
|||
}
|
||||
|
||||
&__image {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
@ -64,6 +64,14 @@ story.add('Avatar', () => {
|
|||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('Wide image', () => {
|
||||
const props = createProps({
|
||||
avatarPath: '/fixtures/wide.jpg',
|
||||
});
|
||||
|
||||
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
|
||||
});
|
||||
|
||||
story.add('One-word Name', () => {
|
||||
const props = createProps({
|
||||
title: 'John',
|
||||
|
|
Loading…
Reference in a new issue