올바른 가로 세로 비율의 이미지 크기 조정 CSS 가로 메뉴

Question

간단하지만 확실한 해결책은 없습니다.

정렬되지 않은 목록과 일련의 이미지 즉, '집', '정보'등을 사용하여 가로 메뉴를 만들었습니다. 각 이미지의 폭은 다양하지만 높이는 25px입니다.

브라우저의 크기를 조정할 때 메뉴의 폭과 높이가 줄어들도록하고 싶습니다. 현재 메뉴가 너비와 높이 만에 줄어들고

http://jsfiddle.net/CAM79/JQuuj/

: 나는이 문제를 보여주기 위해 함께 바이올린을 넣었습니다

<style> 

#container ul.content_list { 
} 
#container ul.content_list li { 
    float: left; 
    list-style: none; 
    width: 100%; 
} 
#container ul.content_list li .image{ 
    float: left; 
    width: 100%; 
    max-height: 25px; 
} 
#container ul.content_list li .image img { 
    float: left; 
    display: inline-block; 
    width: 15%; /* comment this out to make the images the correct width and height */ 
    max-height: 25px; 
} 

</style> 

<div id="container"> 
    <ul class="content_list"> 
     <li> 
      <div class="image"> 
       <img src="homeOff.png" /> 
       <img src="aboutOff.png" /> 
       <img src="servicesOff.png" /> 
       <img src="portfolioOff.png" /> 
       <img src="contactOff.png" /> 
       <img src="blogOff.png" /> 
      </div> 
     </li> 
    </ul> 
</div> 

다음과 같이

현재 코드는 이미지의 높이가 잘못되었습니다.

'너비 : 15 %'(코드에서 강조 표시)를 주석 처리하면 이미지가 올바르게 표시되지만 꼬투리가 감싸기보다는 줄 바꿈됩니다.

어떤 도움이라도 미리 감사드립니다.

Answer 1

디자인을 반응 적으로 만들려면 사용자가 화면의 너비를 조정하는 동안 화면의 너비에 반응해야한다고 생각해야합니다. 그런 다음 동일한 너비로 모든 이미지를 만드는 것이 훨씬 더 쉬울 것입니다. 귀하의 디자인에 따르면 가능하지만 메뉴에서 사진을 사용하는 것은 권장하지 않습니다 !!! CSS 그라디언트를 보면 어떤 디자인을 사용하지 않고도 동일한 디자인을 구현할 수 있습니다 (SEO를 위해 훨씬 낫습니다). 결론을 내리면 ul 태그와 li 태그를 올바르게 사용하는 방법을 확인하고 모든 클래스를 삭제하고 코드 이름을 더 가벼운 태그 이름으로 타겟팅 할 수 있습니다.

<div id="container"> 
<ul> 
    <li><a>Home/</a></li> 
    <li><a>About/</a></li> 
    <li><a>Services/</a></li> 
    <li><a>portoflio/</a></li> 
    <li><a>contact/</a></li> 
    <li><a>blog/</a></li> 
</ul> 

를하고 CSS는 예를 들어 그런 일 할 수 : : 당신은 그런 일에 종료한다

#container ul li{ 
float: left; 
width:15%; 
background:black; 
background: #999; /* for non-css3 browsers */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ 
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */ 

} 

#container ul li a{ 
color:yellow; 
text-align:center; 
font-weight:bold; 
}