Semantic Grid System/Less를 사용하여 이미지를 배치하는 방법은 무엇입니까?

시맨틱 그리드 시스템으로 이미지 배치에 문제가 있습니다. 텍스트에는 문제가 없습니다.Semantic Grid System/Less를 사용하여 이미지를 배치하는 방법은 무엇입니까?

텍스트의 경우 예제 코드가 올바르게 작동합니다. 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>

이미지 위치 못한다. 어떤 도움을 많이 주셨습니다.

출처

2012-04-26 user1318135

나를 위해 어떤 방식으로 이미지의 위치를 찾지 못합니까? –

이미지가 너비가 넓은 것을 참조한다고 가정합니다. 이는 브라우저가 작아도 이미지의 크기를 조정하지 않기 때문입니다. 귀하의 경우에는 폭이 220px이고 이미지 크기가 705px 인 .column(3)이 있습니다.

문제를 해결하는 가장 좋은 방법은 이미지를 너비 220px로 수동으로 조정하거나 이미지 태그에 width="100%" (이 경우 높이 제거)을 설정하는 것입니다.

출처

2012-11-04 05:14:59

Semantic Grid System/Less를 사용하여 이미지를 배치하는 방법은 무엇입니까?

답변

관련 문제