IE6에서 하나의 (CSS) 차원을 사용하여 이미지 크기를 조정할 때 종횡비를 유지하는 방법은 무엇입니까?

여기에 문제가 있습니다. 이미지가 있습니다.

<img alt="alttext" src="filename.jpg"/>

지정된 높이 또는 너비가 없습니다.

특정 페이지에서는 썸네일 만 표시하고 싶습니다. html을 변경할 수 없으므로 다음 CSS를 사용합니다.

.blog_list div.postbody img { width:75px; }

(대부분의 브라우저에서) 가로 세로 비율이 모두 유지 된 균일 한 너비의 축소판 페이지를 만듭니다.

그러나 IE6에서는 이미지가 CSS에 지정된 크기로만 조정됩니다. '자연스러운'높이를 유지합니다.

다음은 문제를 설명하는 페이지 쌍의 예입니다.

• 미리보기 이미지를 표시해야하는 목록
• 전체 크기 이미지를 보여주는 단일 블로그 게시물입니다.

나는 모든 제안에 대해 매우 감사하고 싶지만 (클라이언트가 선택한 플랫폼의 한계로 인해) html 수정을 포함하지 않는 무언가를 찾고 있다는 점을 지적하고 싶습니다. CSS도 javascript보다 선호됩니다.

편집 : 이미지의 크기와 종횡비가 다르다는 것을 언급해야합니다.

Adam Luter가 나에게 이것에 대한 아이디어를 주었지만 실제로는 정말 간단했습니다.

img {
  width:  75px;
  height: auto;
}

IE6는 이제 이미지를 미세하게 조정하고 이것은 다른 모든 브라우저가 기본적으로 사용하는 것 같습니다.

그래도 두 가지 답변에 감사드립니다!

나는 그것이 잘 풀렸다는 것을 기쁘게 생각한다. 그래서 나는 그것이 다른 브라우저를 모방하기 위해 IE6에서 명시 적으로 '자동'을 설정해야한다고 생각한다!

실제로 최근에 배경 용으로 설계된 이미지 크기 조정 기술을 발견했습니다. 이 기술에는 몇 가지 흥미로운 기능이 있습니다.

1. 이미지 종횡비가 유지됩니다.
2. 이미지의 원래 크기가 유지됩니다 (즉, 절대로 축소 할 수 없음).

마크 업은 래퍼 요소에 의존합니다.

<div id="wrap"><img src="test.png" /></div>

위의 마크 업이 주어지면 다음 규칙을 사용합니다.

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

그런 다음 래퍼의 크기를 제어하면 위에 나열한 흥미로운 배율 효과를 얻을 수 있습니다.

명확하게하기 위해 다음 기본 상태를 고려하십시오. 100x100 크기의 컨테이너와 10x10 크기의 이미지. 결과는 100x100의 크기가 조정 된 이미지입니다.

1. 기본 상태에서 시작하여 컨테이너 크기가 20x100으로 조정되고 이미지의 크기는 100x100으로 유지됩니다.
2. 기본 상태에서 시작하여 이미지는 10x20으로 변경되고 이미지 크기는 100x200으로 조정됩니다.

그래서, 즉, 이미지가 항상 적어도 컨테이너 등의 대형으로 만 확장 할 수 이상 그것의 가로 세로 비율을 유지.

이것은 아마도 귀하의 사이트에 유용하지 않으며 IE6에서 작동하지 않습니다. 그러나 뷰포트 또는 컨테이너에 대해 스케일링 된 배경을 얻는 것이 유용합니다.

글쎄,이 문제를 해결할 CSS 해킹을 생각할 수 있습니다.

CSS 파일에 다음 줄을 추가 할 수 있습니다.

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

위의 코드는 IE6에서만 볼 수 있습니다. 종횡비가 완벽하지는 않지만 다소 정상으로 보일 수 있습니다. 정말 완벽하게 만들고 싶다면 원본 그림 너비를 읽는 자바 스크립트를 작성하고 그에 따라 비율을 설정하여 높이를 지정해야합니다.

CSS에서 명시 적 확장을 수행하는 유일한 방법은 여기에있는 것과 같은 트릭을 사용하는 것 입니다.

IE6에서만 필터를 사용할 수도 있습니다 ( PNGFix 확인 ). 그러나 자동으로 페이지에 적용하려면 자바 스크립트가 필요하지만 해당 자바 스크립트는 CSS 파일에 포함될 수 있습니다.

자바 스크립트가 필요한 경우 콘텐츠가로드되면 이미지를 검사하여 높이의 누락 된 값을 자바 스크립트로 채우도록 할 수 있습니다. (죄송합니다.이 기술에 대한 참조가 없습니다).

마지막으로이 비누 박스에 대해 용서해주세요.이 문제에 대한 IE6 지원을 피하고 싶을 것입니다. 규칙 _width: auto뒤에 추가 하여 width: 75pxIE6가 이미지 크기가 잘못 되더라도 적어도 합리적으로 렌더링하도록 할 수 있습니다 .

IE6이 출시되고 있기 때문에 마지막 솔루션을 권장합니다. 20 %, 한 달에 거의 1 % 씩 감소합니다 . 또한 귀하의 사이트는 레크리에이션 및 영국에 있습니다. 이 두 가지 모두 인구 통계 학적으로 IE6에서 벗어나는 데 도움이됩니다. 주말에는 IE6 사용이 거의 40 % 감소하고 (인용 안 함) 영국은 IE6 인구 통계가 훨씬 더 낮습니다 (인용 없음, 죄송합니다).

행운을 빕니다!