时间戳

首页 > 解决方案 > 无法将图像放入 div 容器中

html - 无法将图像放入 div 容器中

问题描述

我试图展示 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

标签： htmlcss

解决方案

看看这个

* {
  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链接以查看示例。

推荐阅读