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

图像正是您设置的尺寸 -

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

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

就中心而言 - 我不知道你想要集中在哪里 - 整个列表，或者li标签中的标签...需要更多信息。

Answer 2

你尝试过这个：

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

因此它按比例缩放以适合其父宽度

Answer 3

CSS：

.img{
margin:50%;
}

你走了！

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无法做到这一点，我最好将缩略图设为固定的方形尺寸......

感谢您的努力。

填充容器的居中图像

5 个答案: