左侧的文本位于容器内，图像位于容器外

Question

当我有像这样的图像设计时，如何用html和css设计这个部分：

文本位于容器内，但右侧的图像不在容器中

Answer 1

这可以帮到你。但是你需要为height解决问题。目前，高度来自文本内容。

.parent {
  background-image: url('http://lorempixel.com/output/food-q-c-640-480-3.jpg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 50% 100%;
}

.text-bg {
  color: #fff;
  background: navy;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="parent">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 text-bg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      <div class="col-xs-6 image-bg"></div>
    </div>
  </div>
</div>

Answer 2

  

您可以查看我尝试过的这个代码段。希望它会有所帮助：

＆＃13;

＆＃13;

body,
html {
  margin: 0px;
  padding: 0px;
}

.full-width-bg {
  float: left;
  position: relative;
  background: blue;
  width: 100%;
}

.container {
  max-width: 1170px;
  margin: 0px auto;
  width: 100%;
}

.left,
.right {
  width: 50%;
  float: left;
}

.left {
  padding: 20px 0;
  color: #fff;
}

.right {
  position: absolute;
  right: 0px;
  width: 50%;
  top: 0px;
  bottom: 0px;
}

.right img {
  height: 100%;
  width:100%;
}

＆＃13;

<div class="full-width-bg">

  <div class="container">
    <div class="left">
      <h1>Lorem Ipsum</h1>
      <p>Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello
        123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123 Hello 123
      </p>
    </div>
    <div class="right"><img src="https://dummyimage.com/800x200/fafafa/000" /></div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;