SemanticUI React Image.Group - изображения не одного размера - PullRequest
Новая
       67

SemanticUI React Image.Group - изображения не одного размера

0 голосов
/ 27 мая 2020

У меня базовое c 3 изображения в строке Image.Group в React, я указал средний размер Image.Group, но все они отображаются в разных размерах.

Я пробовал добавить css id и классы для изменения негабаритных изображений, но это отрицательно влияет на макет группы изображений.

Есть идеи, как сделать все изображения для рендеринга с одинаковой высотой и шириной?

Screenshot

<Grid stackable centered container>
                <Grid.Row >
                    <Grid.Column width={16} textAlign='center'>
                    <Header inverted dividing size='huge'>Portfolio</Header>
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Image.Group size='medium'>
                            <Image as='a' href='#' src={require('./media/calculator-screenshot.JPG')} 
                            label={{ corner: 'right', icon: 'react', color: 'blue', size: 'big' }} />
                            <Image src={require('./media/D3-Choropleth-thumbnail.PNG')}
                            label={{ corner: 'right', icon: 'js', color: 'yellow', size: 'big' }} />
                            <Image src={require('./media/newsletter.JPG')}
                            label={{ corner: 'right', icon: 'node', color: 'grey', size: 'big' }} />
                    </Image.Group>
                </Grid.Row>
                <Grid.Row>
                    <Image.Group size='medium'>
                            <Image src={require('./media/speed-typing-game.JPG')}
                            label={{ corner: 'right', icon: 'react', color: 'blue', size: 'big' }} />  
                            <Image src={require('./media/Pom-thumbnail-2.png')}
                            label={{ corner: 'right', icon: 'react', color: 'blue', size: 'big' }} />
                            <Image src={require('./media/markdown-previewer.JPG')}
                            label={{ corner: 'right', icon: 'react', color: 'blue', size: 'big' }} />
                    </Image.Group>
                </Grid.Row>
                <Grid.Row>
                    <Image.Group size='medium'>
                            <Image src={require('./media/jQuery-drumkit.JPG')}
                            label={{ corner: 'right', icon: 'js', color: 'yellow', size: 'big' }} />  
                    </Image.Group>
                </Grid.Row>
        </Grid>
...