0

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

我的代码是:

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。

4

5 回答 5

0

CSS:

.img{
margin:50%;
}

干得好 !

于 2013-10-18T16:45:20.897 回答
0

你试过这个:

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

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

于 2013-10-18T16:37:10.047 回答
0

图像正是您设置的大小 -

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

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

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

于 2013-10-18T16:36:23.363 回答
0

让它填满整个容器并调整它的大小,试试这个:

*{
    margin: 0;
    padding: 0;
}
.mobile-list li{
    list-style:none;
    margin: 0 auto;
}
.mobile-list li a img { 
    min-width: 100%;
}
于 2013-10-18T17:12:53.893 回答
0

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

谢谢你的努力。

于 2013-10-23T07:02:20.787 回答