1

I have the following HTML/CSS page that successfully centers an image file in the exact middle of a Bootstrap 3 page:

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

What I'd like to be able to do is, using CSS, to also have the image in question scale as the browser resizes.

I tried adding something like

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

and then adding a splash-image class to the <img> tag, but it pushes the image to the right for some reason, and then kind of scales in a hurky-jerky kind of way.

Is there a way to set up the code above so that the image will rescale as the browsre window resizes?

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