使图像适合和调整大小

Question

我试图自己解决这个问题一段时间而且有点卡住了。我无法正确显示这些图像 - 在移动和桌面视图中保持位置。

大多数人可能很容易解决。我正在尝试重新制作这个网站http://www.milkbardigital.com.au/，作为网页设计的一课。

这是我的代码

/**
 * Created by Hewlbern on 21-Jan-17.
 */
import React from 'react';
import {Image} from 'react-bootstrap';

export default React.createClass ( {
    render() {
        var background = {
            backgroundSize : 'cover'
        };
        var heroStyle = {
            width:'auto',
            overflow : 'hidden',
        };
        var ontop = {
            position: 'relative',
            display: 'block',
            margin: 'auto',
            width: '50%',
            bottom: '30%',
            left: '0',
            right: '0',
        };
        return (
            <div style={heroStyle}>
                <Image
                    style={background} responsive
                    src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
                </Image>
                    <Image
                        style={ontop} responsive
                        src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png">
                    </Image>
            </div>
        );
    }
});