如何使用语义网格系统/Less 定位图像？答案

【问题标题】：How to position images using Semantic Grid System/Less?如何使用语义网格系统/Less 定位图像？
【发布时间】：2012-05-07 17:44:43
【问题描述】：

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

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

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

【问题讨论】：

对我有用，它以哪种方式无法定位图像？

标签： css grid semantics less

【解决方案1】：

我假设您指的是图像比您的列更宽？这是因为即使容器很小，浏览器也不会缩放图像。在您的情况下，您有一个.column(3)，它应该呈现为 220px 的宽度和一个 705px 宽的图像。

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

【讨论】：