Question

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

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

我输入的图片尺寸为51.6%。但是，如果下面有任何其他元素，我的图像标题会变长，尽管具有相同的height:51.6%;为什么会这样。我还在下面添加了我的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%;
}

Answer 2

使用display:inline-block进行展示...此外，" css

中还有headerbodyadmin 缺失

这样，无论图像下方的文字数量多少，它的位置都会固定！

.imagesadmincoldstorage
{
    display:inline-block /* added */
    position:absolute;
    width:50%;
    height:51.6%;
    margin-left:-25%;
    margin-top:-21%;
}

working demo

Answer 3

使用max-height而不是height。

为什么我的图片标题的高度根据下面的元素而变化？

3 个答案: