0

我有一个简单的 HTML/CSS 任务。我有一个页面，其中连续显示两个相同大小的图像。请参阅此页面。我需要调整图像的显示大小以满足所有这些标准：

  1. 图像必须在浏览器窗口中一起完全可见，即包含 div/table 的大小仅限于客户区的大小
  2. 图像不放大，保留纵横比
  3. 图像水平居中，它们之间有恒定的空间
  4. 至少在 IE9、Chrome 和 Safari 中有效

我在 CSS 方面不是很有经验，所以我最多可以击败 4 的 2 个标准。

我当前使用的示例页面满足 3、4 和部分 1（仅限制宽度）。我让示例尽可能靠近我的问题，留下所有相关的主 CSS 文件并自动生成 ASP.NET 容器。

图像应该保留在inputtag 中，而不是在 中img，这是可取的，尽管不是至关重要的。您能否建议满足所有条件的样式属性的适当组合？

更新：

具有宽松标准 1 的解决方案，其中允许图像的高度超过客户区域的高度，也将受到赞赏。

4

2 回答 2

0

明白了，但我使用图像作为背景而不是<img>. 希望这不是问题。

随着background-size:contain;背景图像的缩放，同时保留图像的原始比例/纵横比。FF4+、IE9+、Chrome1+（带有供应商前缀）、Opera10+ 和 Safari 3+（源代码）支持它。

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

在您的页面中，我看到您有一个具有动态高度的页眉和页脚，因此您需要一些 jQuery 来调整容器的高度。但让我们先看看如何仅使用 CSS 来实现，然后我们将添加页眉和页脚。

演示（尝试调整窗口大小）

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 */
}​

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

演示（调整窗口大小）

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 方法来获得它。

于 2012-09-27T14:33:13.257 回答
-1

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

于 2012-09-27T11:13:26.260 回答