html - 为什么我的图像标题的高度会根据下面的元素发生变化？

Question

我不太清楚为什么我的图像标题的高度会自动更改，尽管有 css 代码。这是我的图片标题的示例 CSS 代码之一

.imagesadmincoldstorage
{
    position:absolute;
    width:50%;
    height:51.6%;
    margin-left:-25%;
    margin-top:-21%;
}

我输入的图像大小为 51.6%。但是，如果下面有任何其他元素，尽管 height:51.6%; 相同，但我的 imageheader 会变长 为什么会这样。我还在下面添加了我的 html 代码。

<div id="Slideshowall">
<img src="image/s1.jpg" name="slide" class="imagesadmincoldstorage">
</div>
<div id="headerbodyadmin">
</div>

我没有在图片标题下方的元素中插入任何 CSS。

如何防止图像标题根据下面的元素调整大小？

Answer 1

很遗憾，您未能成功地重新创建您的问题，并且由于您没有提供足够的代码，我们将不得不猜测。我假设您要添加的内容位于与图像相同的容器中。或者父容器也有百分比维度，父容器的父容器也有百分比和...

我的猜测:

问题 1:

您的 imagesadmincoldstorage 设置为 height:51.6%; 因此这意味着其容器高度的 51.6%。因此，如果您将内容添加到改变其高度的容器中，则图像的高度也会改变是正常的。

我不会尝试为此寻找解决方案，因为它实际上取决于您的布局，所以如果您提供更多详细信息，我可以尽力帮助您。

问题 2:

您正在使用边距来定位图像。尽管我之前指出了这个问题(百分比边距是根据父级的尺寸计算的，所以如果您更改父级的尺寸，子级的边距也会改变)margin-top 是根据父级宽度计算 see here因此，如果父级的宽度发生变化，它也会垂直移动子级。

要防止这种情况，请使用:

.imagesadmincoldstorage {
    position:absolute;
    width:50%;
    height:51.6%;
    left:-25%;
    top:-21%;
}