填充容器的居中映像

我想將動態生成的圖像（所有不同大小和方向）集中在一個容器中，但它會填充容器的大小。填充容器的居中映像

我的代碼是：

HTML

<ul class="mobile-list"> 
<!-- Thumbnails --> 

<li>  
<div class="gal-desc">Egy halott énekei</div> 

<a href="http://www.baksagaspar.com/wp-content/gallery/print/ehe-borito-sm_0.jpg" alt="Egy halott énekei" title="&lt;strong&gt;Egy halott énekei&lt;/strong&gt; by Mind-járt" rel="shadowbox [set_2]"> 
<img src="http://www.baksagaspar.com/wp-content/gallery/print/thumbs/thumbs_ehe-borito-sm_0.jpg" alt="Egy halott énekei"> 
</a> 

</li> 

<li>  
<div class="gal-desc">Technoids</div> 
<a href="http://www.baksagaspar.com/wp-content/gallery/print/technoids-cover-sm_0.jpg" alt="Technoids" title="&lt;strong&gt;Technoids&lt;/strong&gt; by Mind-járt &amp; Friends" rel="shadowbox [set_2]"> 
<img src="http://www.baksagaspar.com/wp-content/gallery/print/thumbs/thumbs_technoids-cover-sm_0.jpg" alt="Technoids"> 
</a> 
</li> 

</ul>

CSS

.mobile-list li a { 
    display: inline-block; 
    width: 145px; 
    height: 145px; 
    overflow: hidden; 
} 

.mobile-list li a img { 
    min-width: 100%; 
    min-height: 100%; 
}

因爲這是爲移動瀏覽器，它可以解決CSS3，甚至jQuery的。

來源

2013-10-18 Gas

圖像與您設置的尺寸完全相同 - width：145px; height：145px; – dezman

是的，但它延伸到任何一個維度是更大的，如果我將它設置爲固定大小 – Gas

的圖像正是你設置的大小 -

.mobile-list li a { 
    width: 145px; 
    height: 145px; 
}

你可以改變這些值來改變圖像的大小。

就中心而言 - 我不知道你想要居中 - 整個列表，還是li標籤中的a標籤......需要更多信息。

來源

2013-10-18 16:36:23 dezman

你嘗試過這樣的：

.mobile-list li a img { 
    min-width: 100%; 
    height: auto; 
}

所以縮放以適應其母公司寬度比例

來源

2013-10-18 16:37:10

它給了我像以前一樣的結果，但仍然沒有居中集裝箱 – Gas

CSS：

.img{ 
margin:50%; 
}

在這裏你去！

來源

2013-10-18 16:45:20 JustCauseWhat

不幸的是它把img的左上邊緣中心 – Gas

，使其充滿整個容器，並調整其大小，儘管試試這個：

*{ 
    margin: 0; 
    padding: 0; 
} 
.mobile-list li{ 
    list-style:none; 
    margin: 0 auto; 
} 
.mobile-list li a img { 
    min-width: 100%; 
}

來源

2013-10-18 17:12:53

如果這是不可能的CSS我更好地使縮略圖到一個固定的正方形尺寸...

謝謝你的努力。

來源

2013-10-23 07:02:20 Gas

你可以在答案下面給出評論 –

填充容器的居中映像

回答

相關問題