0

レスポンシブに画像を含む div を配置しようとしています。

ブラウザのサイズが変更されても縦横比を維持する背景画像を使用しています。

%ages を使用して div を配置しましたが、ウィンドウが小さくなると、最終的に div が移動し、代わりに画像が切り取られ始めます。

これが私の例です：http://jsfiddle.net/bbLTD/1/

私の目標は、背景画像に対して同じ場所に小さな画像を置いたままダイビングすることです。

私はそれについて間違った方法で進んでいますか？

HTML/CSS は次のとおりです。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>laPINA</title>
    <style type="text/css">
        html { 
        background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

        }

    </style>

</head>
<body>

    <div style="position: absolute; bottom: 50%; right: 10%;">
        <img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg"  width="50" height="50" alt="contact_logo" />
    </div>
</body>
</html>
4

1 に答える 1

1 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>laPINA</title>
    <style type="text/css">
        html { 
        background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

        }
        ***img{
           width: 100%;
 max-width: 50px;
            height:100%;
        max-height:50px;
        }***

    </style>

</head>
<body>

    <div style="position: absolute; bottom: 50%; right: 10%;">
        ***<img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg" alt="contact_logo" />***
    </div>
</body>
</html>

私が行った変更は、太字のイタリック体で示しています。画像の高さと幅を画像のコンテナに対する割合で指定し、必要な最大高さと最大幅を指定できます。

div の style="位置: 絶対; 下: 50%; 右: 10%;".

お役に立てれば。

于 2013-02-12T07:37:01.843 に答える