引導3：如何縮放居中的圖像

我有成功的中心圖像文件在引導3頁的正中間下面的HTML/CSS頁面：引導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>標籤，但它的形象推向出於某種原因的權利，然後在hurky生澀樣的種類秤的方式。

有沒有辦法設置上面的代碼，以便在browsre窗口調整大小時重新調整圖像大小？

來源

2013-08-07 fox

覺得你想找的最大寬度：100％;雖然我非常確定這已經在引導框架中定義..我可能會擺脫.splash圖像，以及如果你只有看到圖像規模 – Richlewis

實際上我想通了;我設置了'img {height：50％;寬度：50％;}'並且做了訣竅。 – fox

哦，我向父div添加了「max-height」和「max-width」。 – fox

爲什麼不使用絕對定位？您可以使用「位置：相對」的身體（或您想要圖像居中的容器）和「位置：絕對」與「頂部：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-07 08:35:58

引導3：如何縮放居中的圖像

回答

相關問題