kitten-components
Version:
Front-end components library
35 lines (30 loc) • 867 B
JavaScript
import React, { Component } from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import { Marger } from 'kitten/components/layout/marger'
import COLORS from 'kitten/constants/colors-config'
export class TeamCardImage extends Component {
static propTypes = {
src: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}
render() {
const { src, title } = this.props
return (
<Marger bottom="2">
<div style={imgBackground(src)} title={title} />
</Marger>
)
}
}
const imageHeight = 378
const imageWidth = 252
const imgBackground = image => ({
backgroundImage: `url(${image})`,
backgroundColor: COLORS.background1,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
width: '100%',
paddingBottom: imageHeight / imageWidth * 100 + '%',
})