0

我有两种布局，但它们在概念上是相同的。

一个是包含图像的 div。另一个是两个浮动 div 元素，它们在左侧和右侧分别占其父 div 的一半，每个元素都包含一个图像。它们的父 div 大小和比例取决于主体大小和比例，直到显示时间才知道，所以我需要按百分比而不是恒定宽度或高度来指定它。在这两种情况下，我都需要最大宽度或高度，同时保持纵横比并且不溢出父 div，因此图像在保持比例的同时尽可能大地显示。

我知道如何保持最大高度的比例，或者同时保持比例，但不能同时保持比例，所以会有溢出。我也知道如何使用 Javascript 来实现这一点，但我试图在我的布局中避免使用脚本，我想在 css 中处理它。

我在网上没有看到类似的东西，谷歌搜索也没有给我任何线索，所以我什至怀疑这在 css 中是否真的可行。

任何解决方案将不胜感激。

编辑 ：

好的，我想出了怎么做。交易是将图像最大高度和最大宽度设置为 100%。但是我面临另一个问题，所以如果有人在做我想做的事情发现它有用，我会发布布局，我会重新提出问题以关注新问题。

这是布局。它将图像纵横比保持在最大可能的大小。

索引.html

<html> 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="header"></div>
        <div id="pageleft" class="page">
            <img src="img/1.jpg">
        </div>
        <div id="pageright" class="page">
            <img src="img/2.jpg">
        </div>
    </body>
</html>

样式.css

html, body {
    height: 100%;
    overflow:hidden;
    padding:0px;
    margin:0px;
}

.header{
    background-color:blue;
    width:100%;
    height:2em;
}

 .page{
    width:50%;
    height:100%;
    position:relative;
 }

 #pageright{
    float:right;
    background-color:green;
 }

 #pageleft{
    float:left;
    background-color:yellow;
 }

.page > img{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    max-height:100%;
    max-width:100%;
}

#pageleft > img {
    right:0;
}
#pageright > img {
    left:0;
}

注意 1：在 Chrome 和 Firefox 中进行了测试，包括桌面（将窗口调整为任意大小/比例）和移动（纵向和横向）。

注意 2：我对图像使用 A 剪纸比例，但应该适用于任何图像大小和比例，即使两个图像具有不同的纵横比。

问题是我的标题高度是 2em，这就是 .page div 溢出的地方。有谁知道解决这个问题的方法？

提前致谢。

4

0 回答 0