我在显示完整图片时遇到了麻烦,我想知道当前的方法有什么问题吗?
我将高度设置为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>;
}
}
感谢您的帮助!
编辑:我尝试了回复中的一个演示后的样子
答案 0 :(得分:1)
这将取决于您的.App
的CSS,并且还将取决于DOM / HTML结构,该结构包装/包含显示城市背景图像的div
。
考虑如下更新.App
的CSS:
.App {
display:flex;
height:100%;
width:100%;
}
您可能还需要确保DOM的实际html
和body
元素的样式设置为覆盖浏览器中的整个客户端视图区域(取决于网站的结构):
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>