React.js-全图未显示

时间:2018-09-21 00:13:38

标签: css reactjs

我在显示完整图片时遇到了麻烦,我想知道当前的方法有什么问题吗?

我要设置为全尺寸的图像是enter image description here

但是,这就是渲染enter image description here

我将高度设置为100%,所以我不确定为什么它仅与文字一起出现:-(

.App {
  text-align: center;
  height:100%;
  width:100%; 
}

body, html {
    height:100%;
    width: 100%;
}

.bg { 
    /* The image used */
    background-image: url("./../../images/City.png");

    /* Full height */
     height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

我的App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
   render() {
      return <div className="App">
         <div className="bg">
            hello world
         </div>
     </div>;
   }
}

感谢您的帮助!

编辑:我尝试了回复中的一个演示后的样子

enter image description here

2 个答案:

答案 0 :(得分:1)

这将取决于您的.App的CSS,并且还将取决于DOM / HTML结构,该结构包装/包含显示城市背景图像的div

考虑如下更新.App的CSS:

.App {
  display:flex; 
  height:100%;
  width:100%; 
}

您可能还需要确保DOM的实际htmlbody元素的样式设置为覆盖浏览器中的整个客户端视图区域(取决于网站的结构):

html, body {
  display:flex;
  height:100%;
  width:100%;
}

有关完整的演示,请please see this jsFiddle。希望这会有所帮助!

注意,您不应直接从此jsFiddle复制HTML。 JSX / React要求您使用className属性来指定DOM元素的class

所以:

<div class="App">
  <div class="bg">
    hello world
  </div>
</div>

应更新为:

<div className="App">
  <div className="bg">
    hello world
  </div>
</div>

使用组件的render()方法。

答案 1 :(得分:1)

将此添加到bg div CSS中:

.bg{
min-height: 600px; /*For example*/
}

因为如果未指定min-height,bg div将采用其内容的高度。

另一种解决方案是将图像放置在普通图像元素中,并使bg div绝对位于其上方。

例如(使用内嵌CSS进行解释)

<div class="App" style="position:relative;width:100%;">
    <img src="the path" style="width:100%; height:auto;" />
    <div class="bg" style="position:absolute;top:0;left:0;right:0;bottom:0;"
         hello world!
    </div>
</div>