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 回答