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

画像は設定したサイズとまったく同じです -

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

これらの値を変更して、画像のサイズを変更できます。

センタリングに関する限り、何をセンタリングしたいのかわかりません - リスト全体、または li タグ内の a タグ... より多くの情報が必要です。

于 2013-10-18T16:36:23.363 に答える
0

これを試しましたか：

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

そのため、親の幅に比例して収まるようにスケーリングされます

于 2013-10-18T16:37:10.047 に答える
0

CSS :

.img{
margin:50%;
}

どうぞ ！

于 2013-10-18T16:45:20.897 に答える
0

これが css で不可能な場合は、サムネイルを固定の正方形の寸法にすることをお勧めします...

がんばってくれてありがとう。

于 2013-10-23T07:02:20.787 に答える
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 に答える