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

我在定位具有语义网格系统的图像时遇到了问题。没有问题的文字。如何使用语义网格系统定位图像/ 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>

未能图像位置。任何帮助非常感谢。

来源

2012-04-26 user1318135

适合我，以哪种方式无法定位图像？ – 2012-04-29 19:47:49

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

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

来源

2012-11-04 05:14:59

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

回答

相关问题