Question

我正在尝试将图像放置为div的背景，并在更改窗口大小时调整图像的大小。

反应成分：

import React from 'react';

const Test = () => {
  return (
   <div className="img-fluid test">
    <br/> // if I add this tag then part of the image is shown
    <br/> // if I add another one, then image is shown even more! still not entire 
   </div>
  )
}

export default Test;

路线：

<Route path="/test" exact component={Test}/>

Css：

.test {
  width: 100%;
  height: auto;
  background: url('/images/1.jpg') no-repeat;
}

当我访问http://localhost:3000/test时，什么也没有显示。我在做什么错了？

谢谢。

Answer 1

尝试这样的事情...

background-image: url('/images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;

您还需要给它一个明确的高度和宽度。自动将不起作用。 10em仅用于示例，因此将其设置为您需要的div。背景图片不会将div拉伸到适合其大小。

用响应式图像填充div背景

1 个答案: