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>

update setting 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 に答える