Question

我已经看过几篇关于如何在外部元素中自动调整单个图像大小的帖子。所有这些解决方案似乎都是通过使图像宽度为100％来实现的。但是我需要并排堆叠几个图像，每个图像的高度相当于保持相对宽度的外部元素高度。我尝试将图像高度= 100％，但这似乎不起作用。

在我的例子中，外部元素是div，设置为外部div中的相对位置。

<div class="basicskin thumb">
    <img class="background" src="/content/skinz/SolidBack/240px/SolidBack-sml_grn.png">
    <div class="numbers" style="top: 14.8571428571429%; left: 6.46666666666667%; height: 68.8253968253968%; width: 87.2444444444444%;">
        <img../><img../>
    </div>
</div>

样式如下：

div.basicskin
{
    position: relative;
    display: inline-block;
}

div.basicskin.thumb > img.background
{
    height: 32px;
    width: auto;
}

div.basicskin > div.numbers
{
    overflow: hidden;
}

div.basicskin > div.numbers img
{
width:auto;
position:relative;
}

我的图片想要呈现完整尺寸而不是相对于我的＆＃34;数字＆＃34;格。

我做错了什么？

感谢您的帮助！

Answer 1

如果您想将height: 100%;设置为<img/>，则应将其设为display: block;并将一些height提供给父块。

height: 100%;仅在其父级已设置height时才有效。

对于IE inline-block支持，您可以使用此修补程序：

.selector {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

Answer 2

将高度设置为％可能会非常棘手，因为您的元素位于<body>内且<html> 可能不是100％高度，这与您本能地假设不同。您必须将这些元素高度设置为100％，以确保您可以将内容扩展到屏幕的完整垂直扩展。我还建议您使用<!doctype html>来处理您的html文件，以确保这些内容在每个浏览器中都能正常运行。

如何使用CSS在相同的外部元素中保持相对大小的多个图像？

2 个答案: