Question

我遇到了一个情况，我有一个位置相对容器，里面有一个位置绝对元素。内部元素包含最大宽度为100％的图像。如果我使用“left”在下面的小提琴中移动我称之为“item”的元素，则元素的宽度会越小，我向右移动（如果向左移动，则不会发生负值）。如果使用css规则“正确”，则会发生相反的情况。如果我从图像中取出宽度声明，则不再出现。有谁知道为什么会这样。这是我创建的一个小提琴来展示这个问题。

.container {
  position:relative;
  overflow:hidden;
  padding-bottom:32%;
} 

.item {
  position:absolute;
}

.content {
  width:400px;
  margin:auto;

}

img {
  max-width:100%;
}


<div class="content">
<div class = "container">
  <div class = "item">
    <a href='https://postimg.org/image/h3h0e82rx/' target='_blank'><img src='https://s22.postimg.org/kabjxun81/banner.jpg' border='0' alt='banner'/><br /><a target='_blank' href='https://postimage.org/'></a><br /><br />
  </div>
</div> 
</div>

https://jsfiddle.net/rv9wcqh2/

非常感谢您的解释。

Answer 1

基于百分比的宽度，根据W3C，＆＃34; refer to width of containing block。＆＃34;当您偏移子元素（.item）时，它将其百分比宽度基于其containing block内的剩余空间。再次，根据规范：

注意：对于其包含块基于块容器元素的绝对定位元素，百分比是根据该元素的填充框的宽度计算的。这是CSS1的更改，其中百分比宽度始终相对于父元素的内容框计算。

两个测试可视化。

1：删除left:N上的.item，然后将padding-left添加到其中一个容器元素中。会产生相同的效果（假设你已经在容器上设置box-sizing: border-box，否则整个事情会增长。） 1a： Double down。容器上的padding-left: 100px和left: 100px上的.item。图像将继续填充剩余空间的100％（现在非常小） 2：在图像上使用px宽度。这将使图像与原始图像保持相同的大小，并移动left: Npx。由于您在父级上有overflow: hidden，因此图像的右侧将被包含块的右边缘截断。

修改评论：

不幸的是，我很难理解为什么如果我使用负值，这种宽度的减小不会发生。即左-50％将其移动到左侧，项目保持其尺寸。对 - 50％向右移动它也保持它的尺寸。

是的，它有点奇怪但left: -50%，当包含块为400px时，意味着目标元素现在从其左边缘到包含块的右边缘有600px。尽管如此，目标元素的基于max-width值的百分比仍然相对于包含块的计算宽度。因此，max-width: 100%设置为width: 400px的包含块内的元素永远不会超过400px。由于它现在有600px与＆＃39;一起工作，因此它的最大宽度增加到400px。

Answer 2

您可以达到所需的行为，将宽度设置为100％到元素

左右属性的正值会限制宽度，但负值不会限制宽度。

作为旁注，小提琴中的元素未匹配

.container {
  position:relative;
  overflow:hidden;
  padding-bottom:32%;
} 

.item {
  position:absolute;
  width: 100%;  /* added */
}

.content {
  width:400px;
  margin:auto;
  
}

img {
  max-width:100%;
}

<div class="content">
<div class = "container">
  <div class = "item">
  <a href='https://postimg.org/image/h3h0e82rx/' target='_blank'><img src='https://s22.postimg.org/kabjxun81/banner.jpg' border='0' alt='banner'/></a>
  <br />
  <a target='_blank' href='https://postimage.org/'></a><br><br>
  </div>
</div> 
</div>

Answer 3

如果我理解正确，我认为你可以使用clip-path的CSS。这本质上是你在寻找什么？

body {background:rgba(255,255,255,1);}

.container {
  position:relative;
  overflow:hidden;
  padding-bottom:32%;
} 

.item {
  position:absolute;
}

.content {
  width:400px;
  margin:auto;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);

}

img {
  max-width:100%;
}

<div class="content">
<div class = "container">
  <div class = "item">
    <a href='https://postimg.org/image/h3h0e82rx/' target='_blank'><img src='https://s22.postimg.org/kabjxun81/banner.jpg' border='0' alt='banner'/><br /><a target='_blank' href='https://postimage.org/'></a><br /><br />
  </div>
</div> 
</div>

元素宽度在一个方向上减小

3 个答案: