固定大小的容器元素中心圖像（CSS，HTML）

我想在從數據庫加載的.net頁面上顯示圖像（金額因此可能會有所不同）。所有圖像分別具有不同的寬度和高度，分別高達130px和60px。我想把圖像放入容器元素，固定寬度爲130px，固定高度爲60px。圖像應該垂直和水平居中。如果可能，容器元件應水平對齊。

我試過div（帶浮點）和範圍。使用div，我可以獲得固定的尺寸，但不能將圖像居中。有了跨度，我可以居中，但不能設置任何大小。如果我把span放入div，它似乎表現得像div（居中被忽略）。固定大小的容器元素中心圖像（CSS，HTML）

來源

2012-03-28 AGuyCalledGerald

你可以看到它在http://jsfiddle.net/km5dk/8/

工作，但我覺得你搜索這樣的事情。

### HTML ### 


    <div id="container"> 
     <div class="image-container"> 
      <img src="#" alt="A image" /> 
     </div> 
    </div> 


    ### CSS ### 

    #container { 
     width: 130px; 
     height: 60px; 
     display: table; 
     background-color: #ccc;   
    } 

    #container .image-container { 
     text-align: center; 
     vertical-align: middle; 
     display: table-cell; 
    } 

    #container .image-container img { 
     max-width: 160px; 
     max-height: 60px;   
    }

來源

2012-03-28 17:14:22

不錯的解決方案，儘管它似乎不適用於Internet Explorer（但在Firefox和Chrome中）。在IE中，垂直對齊沒有完成。 – AGuyCalledGerald 2012-03-29 09:52:55

Internet Expolore 8和更高版本支持垂直對齊。這個例子在IE7中並不適用於過去幾年的很多技術。它應該在IE8或更高版本中工作。 – 2012-03-29 10:01:21

嗯，我在IE 9中試過了，它適合你嗎？ – AGuyCalledGerald 2012-03-29 10:58:42

如果你有一個IMG標籤裏面的divs，使用margin：0px自動div div;

垂直方向：

display：table-cell; vertical-align：middle;

來源

2012-03-28 17:00:09 user92254225

這不會使圖像垂直居中。 – 2012-03-28 17:07:58

顯示：table-cell; vertical-align：middle; – user92254225 2012-03-28 17:20:15

我還在學習自己剛開始做HTML/CSS大約兩個星期前，但這似乎工作的偉大已經懸停，點擊，說明框，標題框，居中的圖像。

您也可以將CSS代碼放在單獨的樣式表中。我以爲我會讓他們一起爲這個職位。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
     background-color:black; 
     color:white; 
    } 
    #container 
    { 
     width:18em; 
     height:18em; 
    } 
    #title-image 
    { 
     background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG'); 
     background-repeat:no-repeat; 
     background-position:center; 
     border:1px solid RGBa(255, 255, 255, 0.1); 
     background-color:RGBa(127, 127, 127, 0.1); 
     color:#CFCFCF; 
     width:10em; 
     height:10em; 
     margin-left: 3.9375em; 
     margin-right: 4em; 
     text-align:center; 
     display: block; 
    } 
    #title-image:hover 
    { 
     border:1px solid RGBa(255, 255, 255, 0.15); 
     background-color:RGBa(127, 127, 127, 0.15); 
     color:#FFFFFF; 
    } 
    #description 
    { 
     width: 18em; 
     border:1px solid RGBa(255, 255, 255, 0.03); 
     background-color:RGBa(127, 127, 127, 0.03); 
     text-align:center; 
     display: block; 
    } 
</style> 
</head> 
<body> 
<div id="container"> 
    <a href="google.com" id="title-image">This is your Title?</a> 
    <p id="description">Your description<br>Can go here.</p> 
</div> 
</body> 
</html>

來源

2013-04-28 16:01:56

思考一個小框外（藉口故意雙關語！），你可以使用background-size在你的容器的CSS規則，background-image: url(this_image.jpg);作爲個體容器本身內嵌的風格。這將處理所有縮放爲你在一個更小和整潔的包。

設置background-size: cover;會縮放圖像，使最小尺寸匹配（儘管可能會有一些裁剪），並且background-size: contain;將確保整個圖像適合。

這是另一種選擇......

丹尼

來源

2014-11-16 16:36:09 allnodcoms

使用的定位。以下爲我工作：

div{ 
    display:block; 
    overflow:hidden; 
    width: 70px; 
    height: 70px; 
    position: relative; 
} 
div img{ 
    min-width: 70px; 
    min-height: 70px; 
    max-width: 250%; 
    max-height: 250%;  
    top: -50%; 
    left: -50%; 
    bottom: -50%; 
    right: -50%; 
    position: absolute; 
}

來源

2016-03-24 08:25:22 FinkAvenue

自舉3，你可以添加一個img響應中心塊類居中的圖像

<img class="img-responsive center-block" src="my_image.png" />

來源

2016-07-29 15:21:29

化妝形象中心

.image-container { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 

.image-container img { 
    position: absolute; 
    right: 0; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto auto; 
}

自動調整圖像大小以適應div容器

.image-container img { 
    max-height: 100%; 
    max-width: 100%; 
}

來源

2017-09-06 01:28:50 sjcoder

固定大小的容器元素中心圖像（CSS，HTML）

回答

相關問題