无法将图片放入div容器中

Question

我正在尝试在div容器内展示图像，但无法在div标签内插入图像。

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
}

<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

我将在下面附加codepen链接以供输出参考：我希望图像适合div的右侧（class =“ image”）

链接：https : //codepen.io/subin_s/pen/oOKKoY?editors=1100

Answer 1

看看这个

* {
  margin:0;
  padding:0;
  background:#fff;
  box-sizing:border-box;
}

body {
  font-family: verdana;
}

section {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:1200px;
  height:400px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex;
}


.content {
  width: 55%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
}

.image {
  width:45%;
  height:100%;
  background:url('https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg') ;
      background-size: cover;
    background-repeat: no-repeat;
}

<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"></div>
</section>

我将附加Codepen 链接以查看示例。