Question

我有一个简单的HTML / CSS任务。我有一个页面，其中有两个相同大小的图像连续显示。见this page。我需要调整图像的显示大小以满足这些条件的所有：

图像必须在浏览器窗口中完全可见，即包含div / table的大小限制为客户区的大小
图片未放大，长宽比保存
图像水平居中，它们之间有恒定的空间
至少在IE9，Chrome和Safari中使用

我对CSS不是很有经验，所以我最多可以打败4个标准。

我目前使用的样本页面满足3,4和部分1（仅限宽度）。我留下了尽可能接近我的问题的样本，留在所有相关的主CSS文件和自动生成的ASP.NET包含。

图片应保留在input标记中，而不是img，这是可取的，但不是至关重要的。你能否建议一个适当的组合风格属性满足所有条件？

更新

放宽标准1的解决方案，允许图像的高度超过客户区域的高度，也会受到赞赏。

Answer 1

知道了，但我使用图片作为背景而不是<img>。希望这不是问题。

使用background-size:contain;缩放背景图像，同时保留图像的原始比例/宽高比。它受FF4 +，IE9 +，Chrome1 +（带供应商前缀），Opera10 +和Safari 3+（source）的支持。

第一个要求的主要问题是：“包含div / table的大小限制为客户区域的大小”，除非父容器也设置了高度，否则无法设置height:100%;。

在你的页面中，我看到你有一个动态高度的页眉和页脚，所以你需要一些jQuery来调整容器的高度。但是我们首先看看如何使用CSS，然后我们将添加页眉和页脚。

Demo （尝试调整窗口大小）

HTML：

<html>
<body>
<div id="body">
    <div>
        <div class="left"></div>
    </div>
    <div>
        <div class="right"></div>
    </div>
</div>
</body>
</html>

CSS：

html, body, #body {
    width:100%;
    height:100%;
}
#body, #body > div {
    overflow:hidden;
}
#body > div {
    box-sizing:border-box;
    width:50%;
    height:100%;
    float:left;
    padding:10px; /* or whatever you need */
}
#body > div > div {
    margin:0 auto;
    height:100%;
    width:100%;
    background-repeat:no-repeat;
    background-position:top center;
    -webkit-background-size:contain; /* Chrome1+, Safari 3+ */
    background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
    background-image:url(/* your left image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}
#body > div > div.right {
    background-image:url(/* your right image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}

让我们添加页眉和页脚。我们必须从#body中删除height:100%;，并根据以下结果计算其高度：窗口高度 - 标题高度 - 页脚高度。

Demo （调整窗口大小）

HTML：

<html>
<body>
<header>I'm a header</header>
<div id="body">
    <div>
        <div class="left"></div>
    </div>
    <div>
        <div class="right"></div>
    </div>
</div>
<footer>I'm a footer</footer>
</body>
</html>

CSS：

html, body {
    width:100%;
    height:100%;
}
header, footer {
    background:grey;
}
#body {
    height:400px; /* fallback no javascript */
}
#body, #body > div {
    overflow:hidden;
}
#body > div {
    box-sizing:border-box;
    width:50%;
    height:100%;
    float:left;
    padding:10px; /* or whatever you need */
}
#body > div > div {
    margin:0 auto;
    height:100%;
    width:100%;
    background-repeat:no-repeat;
    background-position:top center;
    -webkit-background-size:contain; /* Chrome1+, Safari 3+ */
    background-size:contain; /* FF4+, IE9+, Chrome3+, Opera10+, Safari 3+ */
}
#body > div > div.left {
    background-image:url(/* your left image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}
#body > div > div.right {
    background-image:url(/* your right image url */);
    max-width:417px; /* the real image width */
    max-height:512px;; /* the real image height */
}

jQuery的：

function calcHeight(){
    var docHeight = $(document).height();
    var headHeight = $('header').outerHeight();
    var footHeight = $('footer').outerHeight();
    var bodyHeight =  docHeight - ( headHeight + footHeight);
    $('#body').height(bodyHeight);
}
calcHeight(); /* called first time on page load */
$(window).on('resize',calcHeight());/* do the math again when window's resized */

我认为这很直接。我这样写它是为了让它可以理解，但当然你可以更多地压缩它。

我已将outerHeight用于页脚和标题以包含可能的边距。

如果您不想包含jQuery库，那么肯定有一种纯JavaScript方法可以获得相同的内容。

Answer 2

为了保持宽高比仅在css中定义宽度，它会自动调整高度以保持宽高比。

CSS：正确限制表格中两个图像的大小

2 个答案: