Question

我有以下HTML / CSS页面，它成功地将图像文件集中在Bootstrap 3页面的正中间：

<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窗口调整大小时图像会重新缩放？

Answer 1

为什么不使用绝对定位？您可以在正文（或您希望图像居中的容器）上使用“position：relative”，使用“position：absolute”，“top：10％; bottom：10％; right：10％; left：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%;
}

bootstrap 3：如何缩放居中图像

1 个答案: