图像不适合 div答案

【问题标题】：Image doesn't fit inside div图像不适合 div
【发布时间】：2018-04-22 20:54:20
【问题描述】：

我发现很难将图像放入包含文本的 Div 中。每次我试图让它适应超级 div 的边界时，无论我从 css 端使用什么，它都会超出范围。谁能告诉我我做错了什么？

.justRight {
  float: right;
  max-height: 100%;
  max-width: 100%;
  margin-bottom: 40px;
  margin-right: 50px;
  background-image: url(https://internal.bs.fb.ac.uk/modules/2017- 
 18/bsl/css/sign_language.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.jas {
  background-color: white;
  border: 1px outset blue;
  position: absolute;
  margin-left: 20px;
  border-top: 40px solid blue;
  border-right: 2px outset blue;
  margin-top: 10px;
  margin-right: 20px;
  height: 80px;
  padding-left: 10px;
  width: 96.3%;
}

<div class="jas">
  <h1>Sign Language</h1>
  <div class="justRight">
  </div>
</div>

【问题讨论】：

你是什么意思？背景？
我不希望它是主div的背景，我希望它与主div右侧的文字对齐
请分享图片； img 链接似乎已损坏。
我认为这是因为它链接到一个 uni 服务器，您必须登录到该服务器才能访问图像。你可以使用任何你想要的图像（如果你有的话）。我似乎并不重要

标签： css html

【解决方案1】：

通过对父级 (.jas) 说 height: 80px，您将父级 div 的高度限制为 80 像素。所以不会超越。所以删除父级（.jas）的高度。改为设置孩子的高度（.justRight）。

不知道你为什么对孩子使用float: right 值（.justRight）。如果不需要，请删除。

Codepen：https://codepen.io/johnsackson/pen/KRdvMQ

* {
      box-sizing: border-box;
   }
   .justRight {
      height: 100px;
      max-width: 100%;
      margin-bottom: 10px;
      background: url(https://placehold.it/1920x200) 0 0 no-repeat;
      background-size: cover;
    }

    .jas {
      background-color: white;
      border: 1px outset blue;
      /* position: absolute;  */ /* use if only needed */
      margin: 10px 0;
      border-top: 40px solid blue;
      border-right: 2px outset blue;
      padding: 0 10px;
      width: 100%;
    }

希望这会有所帮助。

【讨论】：

【解决方案2】：

您的问题是h1 标记位于位置：相对。改变它会解决你的问题。

h1 {position: absolute}

【讨论】：