Question

我有两个布局，但它们在概念上是一样的。

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

我知道如何保持比例与最大高度或与，但不是两者，所以有溢出。我也知道如何使用Javascript完成此操作，但我正在尝试避免布局中的脚本，我想在css中处理它。

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

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

编辑：

好的，我想出了怎么做。该交易将图像max-height和max-width设置为100％。然而，我面临另一个问题，所以我发布布局，如果有人做我想做的事情发现它有用，我重新把问题集中在新问题上。

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

的index.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>

的style.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：我正在使用纸张切割比例的图像，但应该使用任何图像大小和比例，即使两个图像具有不同的宽高比。

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

提前致谢。

div内图像的最大高度或宽度，同时保持纯css中的比例

0 个答案: