정사각형 html 요소 내부의 이미지 종횡비 유지

이것은 html/css에서 악명 높은 문제이지만, 어쨌든 묻습니다. 나는 철학적 인 것이 아니라 구체적인 반응을 찾고있다.정사각형 html 요소 내부의 이미지 종횡비 유지

아래의 html 파일에서 "width : 64px;"만 사용하는 경우 이미지가 올바른 종횡비로 표시되지만 목록 항목이 일정하게 간격을 두지 않습니다.

"너비 : 64px, 높이 : 64px;"를 사용하면 항목 분리는 정확하지만 이미지의 가로 세로 비율이 잘못됩니다.

일반적인 해결 방법은 이미지를 정사각형 내에 래핑하는 것입니다. 나는 이것을 피하고 싶다. 여기

<html> 
    <head> 
     <style type = "text/css"> 
      img { 
      width: 64px; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li> 
       <a href="foo.html"> 
        <img align="middle" style="bulletIcon" src="image1.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="bar.html"> 
        <img align="middle" style="bulletIcon" src="image2.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="bar.html"> 
        <img align="middle" style="bulletIcon" src="image2.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="foo.html"> 
        <img align="middle" style="bulletIcon" src="image1.svg"/> 
        Foo 
       </a> 
      </li> 
     </ul> 
    </body> 
</html>

두 이미지들이다. 그들은 여기 완전성을 위해 svg이지만 실제 문제는 jpg/png이기 때문에 실제로 더 어렵습니다. (그래서 나는 어쨌든 나쁜 해결책 인 svg viewbox로 재생할 수 없습니다.) 여기

는

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100" height="200" 
    viewBox="0 0 100 200" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 90 10 L 90 190 L 10 190 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

지금 image2.svg image1.svg입니다

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" height="100" 
    viewBox="0 0 200 100" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 190 10 L 190 90 L 10 90 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

출처

2011-12-10 Calaf

찾고 계시는 정확한 결과에 대해 혼란 스럽습니까? 균일 한 간격의 이미지 그리드이지만 다른 종횡비가 있습니까? –

는 IE7 지원이 필요하지 않은 경우, 나는 당신을 건의 할 것 표 행/표 셀 사용 : http://jsfiddle.net/vRkgs/

li { 
    display:table-row; 
} 
li a { 
    display:table-cell; 
    height:100px; 
    vertical-align:middle; 
}

출처

2011-12-10 17:24:48 ptriek

목록 항목을 클릭 할 수있는 영역으로 변환하면 이미지와 동일한 높이가 상당히 나빠집니다. 우발적 인 클릭에 대한 함정이기도합니다. – Calaf

정사각형 html 요소 내부의 이미지 종횡비 유지

답변

관련 문제