Question

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

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

请帮帮我。

谢谢！

Answer 1

对于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}}

希望这可以解决您的问题，并随时提出任何问题。：）

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

1 个答案: