html - 如何让图像出现在父内容之外

Question

我在 CSS 方面遇到了困难。我有一个包含图像和文本内容的内容。我想将文本对齐到屏幕的右侧，但我不想将图像限制为内容的宽度。我想让图像出去。

我尝试调整位置，“固定”允许我通过内容高度变化将图像移动到内容之外，从而解耦图像。

<div class="content2">
  <img id="cloudimg" src=".\Cloud.jpg">
  <p>Cloud Computing</p>

</div>

在我的CSS中

.parallax-wrapper-cloud {
  width: 460px;
  height:180vh;
  position: absolute;
  right:0;
  padding-top:20vh;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.parallax-wrapper-cloud::before {

  content:"";
  width: 100vh;
  height: 100vh;
  top:0;
  right:0;
  background-color: #ffddfbff;
  !background-image: url("./bkg4.jpg");
  !background-repeat: no-repeat;
  !background-position: left;

  position: absolute;
  z-index: 2;
  transform:translateZ(-1px) scale(2);

}


.content2 {
    margin: 0 auto;
    color: #black;
    padding: 50px;
    width: 100;
    background: #ee0d0d;

}

这是我看到的(图像右侧被截断):

----------------------
|                    |
|  ---------------   |
|  |    half      |  |
|  |    image     |  |
|  |              |  |
|  ---------------   |
|   Cloud Computing  |
|                    |
----------------------

这是我希望看到的(图像完整显示，部分在外面):

  ----------------------
  |                    |
---------------        |
|    full      |       |
|    image     |       |
|              |       |
---------------        |
  |   Cloud Computing  |
  |                    |
  ----------------------

如上所述

Answer 1

.content2 {
    margin: 0 auto;
    color: #black;
    padding: 50px;
    width: 300px;
    background: #ee0d0d;
    text-align: center;
}

#cloudimg {
  height: 100%;
  width: 100%;
  left: 40%;
  transform: translate(-40%);
}

<div class="content2">
  <img id="cloudimg" src="https://i1.wp.com/amergin.net.au/wp-content/uploads/2017/03/image-placeholder.jpg?ssl=1">
  <p>Cloud Computing</p>

</div>