2012-04-26 6 views
1

セマンティックグリッドシステムで画像を配置するのに問題があります。テキストに問題はありません。Semantic Grid System/Lessを使用して画像を配置する方法は?

テキストでは、サンプルコードは正常に動作します。 HTML:

<body> 
<article>Main</article> 
<section>Sidebar</section> 
</body> 

LESS:

@import 'grid.less'; 

@columns: 12; 
@column-width: 60; 
@gutter-width: 20; 

article { 
.column(9); 
} 
section { 
.column(3); 
} 

HTMLの画像は、次のと同じ実装:

<body> 
<article>Mainr</article> 
<section><img src="title.png" 
     width="705" 
     height="66.5" 
     alt="Title" 
     class="pngimg"></section> 
</body> 

は画像を配置しません。どんな助けでも大歓迎です。

+0

私のために働く、どのように画像を配置できないのですか? –

答えて

0

私はあなたのイメージがあなたの列よりも広いと言いますか?これは、コンテナが小さくてもブラウザが画像を拡大縮小しないためです。あなたの場合は、で、幅は220px、画像は705pxです。

問題を解決する最も良い方法は、イメージを220pxの幅に手動で拡大するか、width="100%"を画像タグに設定します(この場合は高さを削除します)。

関連する問題