2016-07-16 3 views
0

logo.png를 눌러 페이지 전체의 3 분의 1 정도가되게하고 싶습니다. 큰 여백 또는 여백을 만들면 이미지 크기를 제한하는 다른 코드에도 불구하고 이미지가 커집니다.여백과 여백은 이미지를 더 크게 만듭니다.

.header { 
    width: 200px; 
    height: 60px; 
} 

.class { 
    max-width:100%; 
    max-height:100%; 
    margin-left: 300px; 
} 


<body> 
<div class="header"> 
<table> 
    <tr><td><img src="Logo.png" class="class"></td></tr> 
</table> 
</div> 
</body> 

이미지 크기를 동일하게 유지하면서 이미지를 수평으로 더 밀어 넣을 방법이 있습니까?

답변

0

문제는 다음입니다 : 내부에있는 img 태그에 margin-left으로는 td 당신이 margin-left의 값으로 td의 너비를 변경 (단지 그것의 크기는 아이들의 적응). 비율을 유지하려면 이미지의 크기가 커집니다. 테이블 셀 이후 이 하지 존중 width을 수행하고 전체 tablewidth에 따라 축소 할 것입니다, 당신은 width의 제한을 설정 tablewidth를 지정하거나 어쩌면 당신이 완전한 유연성을 <div> 요소로 전환해야합니다. 내가 말했듯이 - - 때문에

헤더 width/height, 당신의 table의 너비/높이를 제한하지 않습니다 그것은 아이들 폭/높이의 적응이다. 그래서 안쪽 요소 (테이블)가 커지므로 부모를 오버 플로우시킵니다.

관련 문제