如何在react.js中使背景图像跨越整个div并放大？答案

【问题标题】：How to make a background Image span the entire div and zoom in, in react.js?如何在react.js中使背景图像跨越整个div并放大？
【发布时间】：2021-04-18 19:44:14
【问题描述】：

如示例所示，我希望 div 的背景图像是图像的放大版本，然后在其上显示图像。

我的代码：

<div
      className="movie-details"
      style={{
        backgroundImage: "url(" + movieImg + ")",
        backgroundColor: "black",
        backgroundRepeat: "no-repeat",
      }}
    >
      <img
        src={movieImg}
        style={{
          height: "100%",
          width: "300px",
        }}
      ></img>

CSS：

.movie-details {
  width: 90%;
  height: 355px;
}

.movie-details img {
  margin: auto;
  display: block;
  padding-bottom: 30px;
}

我给 div 设置了黑色背景来描绘 div 的宽度。

【问题讨论】：

标签： css reactjs image

【解决方案1】：

试试：BackgroundSize: "500%"，例如。取决于它的放大程度。

【讨论】：

【解决方案2】：

可以通过background-image for container 实现，然后在该容器内居中放置一个图像：

html, body {
    margin: 0;
    height: 100%;
}

div.wrap {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

div.wrap > .background-image {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

.container {
    height: 100%;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

div.container img {
    width: 100px;
    height: 100px;
}

 <div class="wrap">
     <div class="background-image">
         <div class="container">
             <img src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"/>
         </div>
     </div>
 </div>

【讨论】：