css - 居中填充容器的图像

Question

我想将我动态生成的图像（所有大小和方向）集中在一个容器中，但它会填满它的大小。

我的代码是：

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。

Answer 1

CSS：

.img{
margin:50%;
}

干得好 ！

Answer 2

你试过这个：

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

所以它会按比例缩放以适应其父宽度

Answer 3

图像正是您设置的大小 -

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

您可以更改这些值以更改图像的大小。

就居中而言-我不知道您要居中的是什么-整个列表或li标签中的a标签...需要更多信息。

Answer 4

让它填满整个容器并调整它的大小，试试这个：

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

Answer 5

如果 css 无法做到这一点，我最好将缩略图制作成固定的正方形尺寸......

谢谢你的努力。