1

セマンティック グリッド システムで画像を配置するのに問題があります。テキストは問題ありません。

テキストの場合、サンプル コードは問題なく動作します。HTML:

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

以下：

@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>

画像の配置に失敗します。どんな助けでも大歓迎です。

4

1 に答える 1

0

画像が列よりも広いことを参照していると思いますか？これは、コンテナーが非常に小さい場合でも、ブラウザーが画像をスケーリングしないためです。あなたの場合.column(3)、幅 220px にレンダリングする必要がある と幅 705px の画像があります。

問題を解決する最善の方法は、画像を手動で幅 220px にスケーリングするかwidth="100%"、画像タグに設定することです (この場合は高さを削除します)。

于 2012-11-04T05:14:59.703 に答える