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

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 only, you could also use filters (check out PNGFix). But applying them automatically to the page will need javascript, though that javascript could be embedded in the CSS file.

If you are going to require javascript, then you might want to just have javascript fill in the missing value for the height by inspecting the image once the content has loaded. (Sorry I do not have a reference for this technique).

Finally, and pardon me for this soapbox, you might want to eschew IE6 support in this matter. You could add _width: auto after your width: 75px rule, so that IE6 at least renders the image reasonably, even if it is the wrong size.

I recommend the last solution simply because IE6 is on the way out: 20% and going down almost a percent a month. Also, I note that your site is recreational and in the UK. Both of these help the demographic lean to be away from IE6: IE6 usage drops nearly 40% during weekends (no citation sorry), and UK has a much lower IE6 demographic (again no citation, sorry).

Good luck!

참고URL : https://stackoverflow.com/questions/757782/how-to-preserve-aspect-ratio-when-scaling-image-using-one-css-dimension-in-ie6