如何使用語義網格系統定位圖像/ 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？

回答

相關問題