Question

我的图像在高度和宽度上都比屏幕大。 html和body设置为100％。然而，当我width:90%;height:auto;宽度设置但高度悬空时。

这是一个fiddle（实际上工作正常）。

<html>
    <head>
        <title></title>
        <style>
            html, body {
                height:100%;
                width:100%;
                overflow:hidden;
            }
            img {
                height:auto;
                width:95%;
            }
        </style>
    </head>
    <body>
        <img src="foo.png" /> /*img is 1288 wide by 1072 tall */
    </body>
</html>

更新设置最大值无效（至少在您复制并粘贴此确切文本时）。

<html>
    <head>
        <title></title>
        <style>
            html, body {
                    height:100%;
                    width:100%;
                    overflow:hidden;
                }
                img {
                    height:auto;
                    width:95%;
                    max-height:95%;
                    max-width:95%;
                }
        </style>
    </head>
    <body>
        <img src="http://www.nasa.gov/sites/default/files/images/743349main2_Timelapse_Sun_2k-16x9-673.jpg" /> /*img is 1288 wide by 1072 tall */
    </body>
</html>

Answer 1

我真的无法理解你的形象

在这里查看小提琴http://jsfiddle.net/nowak2009/4p9j2/

html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
img {
    height:auto;
    max-height:100%;
    max-width:10%;    
    width:100%;
}

<强>更新

这是您的解决方案

min-height: inherit;
width: 60%;
position: absolute;
top: 0px;
left: 0px;

将其设置为图像

相应调整？

这是完整的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body{width: 100%;}
img {
height: auto;
max-width: 95%;
width: 100%;
}
</style>    
</head>
<body id="page1">
<img src="http://www.nasa.gov/sites/default/files/images/743349main2_Timelapse_Sun_2k-16x9-673.jpg" />
</body>
</html>

高度：自动;即使父元素是100％也不起作用

1 个答案: