html - 无法将图像放入 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>

我将在下面附上代码笔链接以供输出引用:我希望图像适合 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>

I am attaching the Codepen link to see example.