Question

我在使用语义网格系统定位图像时遇到了麻烦。文字没问题。

使用文本，示例代码工作正常。 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>

无法定位图像。任何帮助非常感谢。

Answer 1

我假设你引用的图像比你的列宽？这是因为浏览器即使它们的容器很小也不会缩放图像。在您的情况下，您有.column(3)，其宽度应为220px，图像宽度为705px。

解决问题的最佳方法是手动将图像缩放到220px的宽度或在图像标记中设置width="100%"（在这种情况下移除高度）。

如何使用Semantic Grid System / Less定位图像？

1 个答案: