0

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

这是一个小提琴（实际上工作正常）。

<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>

更新 设置 max 无效（至少在您复制和粘贴此确切文本时）。

<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>
4

1 回答 1

0

我真的无法从你的图像中理解任何东西

在这里检查小提琴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>
于 2013-11-14T03:47:31.227 回答