无法将图片放入div容器中

Question

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

HTML

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

CSS

* {
  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') ;
}

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

链接：https://imgur.com/XfHCm1N

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>

Answer 2

看看这是否符合您的需求：

    * {
  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: 50%;
  height:100%;
  padding: 2% 3%;
  text-align:justify;
  line-height:1.5em;
  font-size: 18px;
  display: inline-block;
}

.image {
  width:40%;
  height:100%;
  display: inline-block;
}

#mockup {
  overflow: auto;
  max-height: 100%;
  
}

<section>
  <div class="content">
    <h1></h1>
  </div>
  <div class="image"><img src="https://i.postimg.cc/2S7fjBxD/cyberpunk-mockup.jpg" alt="" id="mockup"></div>
</section>

Answer 3

检查是否可以解决您的问题：

* {
  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:100%;
  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:100% auto;
  background-repeat:no-repeat;
}

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

Answer 4

将图像调整为高度

我将此添加到class =“ image”

min-width: 600px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;

由于将断面高度设置为400px，并且具有比例图像，因此您需要使用更多我上面列出的背景属性，然后使用它。

我想您希望它像带有内容和图片的广告一样，并且如果您希望班级图像的宽度保持45％，则可以，并且位于中间，并且无需重复。

我建议您使用背景属性以及宽度和高度来获得想要的广告外观。

* {
  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') ;
  min-width: 600px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

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