我在使用语义网格系统定位图像时遇到问题。文本没问题。
对于文本，示例代码可以正常工作。 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>
无法定位图像。非常感谢任何帮助。
最佳答案
我假设您指的是比您的列宽的图像？这是因为即使容器很小，浏览器也不会缩放图像。在您的情况下，您有一个 .column(3) 应该渲染到 220px 的宽度和一个 705px 宽的图像。
解决问题的最佳方法是手动将图像缩放到 220 像素的宽度或在图像标记中设置 width="100%"(在这种情况下删除高度)。
关于css - 如何使用语义网格系统/更少定位图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10342799/