我想将我动态生成的图像(所有大小和方向)集中在一个容器中,但它会填满它的大小。
我的代码是:
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="<strong>Egy halott énekei</strong> 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="<strong>Technoids</strong> by Mind-járt & 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。