1

Bootstrap 3 ページのちょうど真ん中に画像ファイルを正常に配置する次の HTML/CSS ページがあります。

<head>
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="splash.css" media="screen" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>

<html>

<style>

html, body{
    height: 100%;
    margin: 0;
    padding: 0 0;
    background-color: #D1E5EE;
} 

.container-fluid{
    height:100%;
    display:table;
    width:100%;
    padding-right:0;
    padding-left: 0

}   

.row-fluid{
    height:100%;
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    width:100%
}

</style>

<body>
    <div class="container-fluid">
         <div class="row-fluid">
            <div>                
                <img src="images/splash.svg">
             </div>
        </div>
    </div>
</body>


</html>

私ができるようにしたいのは、CSS を使用して、ブラウザのサイズ変更に合わせて問題の画像を拡大縮小することです。

のようなものを追加してみました

.splash-image{
  height: 80%;
  width: 80%;
}

splash-imageタグにクラスを追加すると<img>、何らかの理由で画像が右に押し出され、ぎくしゃくした方法でスケーリングされます。

上記のコードを設定して、browsre ウィンドウのサイズが変更されると画像が再スケーリングされるようにする方法はありますか?

4

1 に答える 1

0

絶対配置を使用しないのはなぜですか？ボディ (または画像を中央に配置するコンテナー) で「位置: 相対」を使用し、「上: 10%; 下: 10%; 右: 10%; 左: 10%」で「位置: 絶対」を使用できます。 "。私はこのようなことをします：

  • HTML:

    <body>
    <div class="container-fluid">
        <img class="splash-image" src="images/splash.svg">
    </div>
</body>

  • CSS:

    body{/* your body style*/}

.container-fluid {
    /* your container style */
    position: relative;
}

.splash-image {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}
于 2013-08-07T08:35:58.230 に答える