如何在React中以全屏大小填充图像

时间:2016-04-13 06:34:31

标签: react-native

如何在React中以全屏尺寸填充图像?

我看了很多博客和代码,但所有这些都不适合我。

请帮帮我。

谢谢!

1 个答案:

答案 0 :(得分:0)

对于React-Native,您需要使用 flex 属性。

var ImageCtner = React.createClass({
    render: function() {
        var url = '/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
        return (
            <div className='full-page-image'>
                <img src={url} />
            </div>
        );
    }
});

//render you component here...

=================以下是网页====================

实际上 React 只是简单地渲染您的组件并为您提供其他好处,例如易于组合您的组件。 它不会改变基本概念网页的工作方式

你可以这样做,

.full-page-image {
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
}
.full-page-image img {
     width: 100%;
     height: 100%;
}

然后在你的样式文件中,你可以写下你的风格。

{{1}}

希望这可以解决您的问题,并随时提出任何问题。 :)