使用相对位置和绝对位置时，我的图像消失了答案

【问题标题】：My images disappear when using position relative and absolute使用相对位置和绝对位置时，我的图像消失了
【发布时间】：2018-01-19 21:55:26
【问题描述】：

我将此代码用于多篇文章并且我认为它工作正常，除非我尝试通过添加样式 position: relative 和 id="target" 为文章中的其中一个图像添加一种特殊样式，但随后图像宽度缩小到 0 或者它们消失，我不知道我在这里犯了什么样的错误。请指教。

尝试删除position: relative 和id="target"，看看代码是如何工作的。

是否有更好的方法来使用 jQuery 或 JS 实现该概念，请分享。

.article {
  border: 1px solid red;
  padding: 0;
  display: flex;
}
 
.article-content {
  border: 1px solid black;
  width: 46.66%;
  text-align: left;
  align-self: center;
  margin-left: auto;
}

.img-control {
  border:1px solid black;
  max-width: 53.66%;
  margin-right: auto;
  margin-left: 1rem;
  overflow: hidden;
}

.image {
  width: auto;
  width:100%;
}

.img-control img {
  display: block;
  max-width: 100%;
  width: auto;
}

img #target {
  transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
  width: 670px;
  display: block;
  position: absolute;
}

@media only screen and (max-width:480px) {
  .article {
    flex-flow: wrap column;
  }
  .article-content, .img-control {
    margin: 0 auto;
  }
}

<div class="article">
  <div class="article-content">
    <h3 class="mainTitle">What is Lorem Ipsum?</h3>
    <h5 class="subTitle">Lorem Ipsum</h5>
    <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  </div>
  <div class="img-control" style="position: relative;">
    <div class="image">
      <img src="http://via.placeholder.com/466x585" width="100%" alt="" style="width: 670px;right: -48px;top: -18px; display: block;position: absolute;" id="target" />
    </div>
  </div>
</div>

【问题讨论】：

你说你想要一个更好的方法，但你想要理想的图像在哪里？
如果你想隐藏图像，你可以在 img-control 上使用 visibility:hidden，但我仍然不清楚你想要的结果是什么。
@JonathanChaplin 我希望图像位于具有绝对位置的容器内，这样我可以使比例更大。而且我不想隐藏图像
顺便说一句，根据您希望横幅旁边的图像有多大，您可以在此类中调整宽度：.img-control
<img ... width="100%" ... /> 可能没有按照您的想法进行操作。它在 HTML4 和 HTML5 中的行为不同。 HTML5 期望该值以像素为单位，而不是 %。

标签： javascript jquery css responsive css-transforms

【解决方案1】：

如果您想使用绝对定位，您需要让父容器具有 position:absolute 或 position:relative。

此外，为了让元素占据其父元素的整个高度或宽度，您需要设置父元素的高度/宽度，然后将子元素的高度/宽度设置为 100%（父元素中的所有可用空间）。最初您将图像高度设置为 670，因此它超过了父元素块 Per Mdn

百分比是指包含块的宽度

    <style>

.article {
  border: 1px solid red;
  padding: 0;
  display: flex;
}

.article-content {
  border: 1px solid black;
  width: 46.66%;
  text-align: left;
  align-self: center;
  margin-left: auto;
}

.img-control {
  border:1px solid black;
  width: 20.66%;
  height:156px;
  margin-right: auto;
  margin-left: 1rem;
  overflow: hidden;
}

.image {
  height:100%;
  width:100%;
}

.img-control img {
  display: block;
  height:100%;
  width:100%;
}

img#target {
  transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
  width: 670px;
  display: block;
  position: absolute;
}

@media only screen and (max-width:480px) {
  .article {
    flex-flow: wrap column;
  }
  .article-content, .img-control {
    margin: 0 auto;
  }
}     
</style>
</head>
    <body>
<div class="article">
  <div class="article-content">
    <h3 class="mainTitle">What is Lorem Ipsum?</h3>
    <h5 class="subTitle">Lorem Ipsum</h5>
    <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  </div>
  <div class="img-control" style="position: relative;">
    <div class="image">
      <img src="http://via.placeholder.com/466x585" width="100%" alt="" style="top: -18px; display: block;position: absolute;" id="target" />
    </div>
  </div>
</div>

Working Fiddle here

【讨论】：

但这不适用于其他文章，如果图像小于父容器的 30%，我将在图像右侧有空白，请检查 Code here
@Arsaar 将 .img-control img 的宽度和高度设置为 100%，然后 .image 修复它
@Arsaar 我用上面提到的更改更新了您的代码笔：codepen.io/jchaplin2/pen/KZJwmP

【解决方案2】：

您的.img-control 会缩小，因为它的宽度未设置（width 和max-width 是不同的东西）。

img #target 也应该是 img#target 没有空格。如img #target 表示“img 元素中id='target' 的元素”，而img#target 表示“id='target' 的img 元素”。

并且请避免使用内联样式，它们会让您和其他人感到困惑。

【讨论】：