HTML 테이블 레이아웃을 시뮬레이션하기 위해 CSS 흐름 레이아웃의 자동 이미지 크기 조정

Question

스크린 해상도에 따라 너비와 높이를 정적 값으로 설정했기 때문에 CSS 흐름 레이아웃에서 눈에 띄지 않는 이미지가 있습니다.

CSS 플로우 레이아웃에는 누군가가 브라우저 창을 더 작게 만드는 동안 이미지를 자동으로 조정하도록하는 방법이 있습니까? 나는 이것을 HTML 테이블 레이아웃에서 보았고 테이블이 가능하다고 가정합니다. CSS 흐름 레이아웃에서도 이것을 수행 할 수있는 방법이 있습니까?

Answer 1

빠른 테스트는 다음을 보여줍니다.

<img class="test" src="testimage.jpg" />

결합 :

img.test { width: 50%; }

아마도 원하는 방식으로 크기를 조정합니다. 이미지는 포함 된 상자의 너비를 50%로 적절하게 크기로 조정하고 세로로 크기를 조정하고 종횡비를 유지합니다.

수직 변경에 따라 크기를 조정하는 것은 적어도 지속적으로 원하는 방식으로 작동하지 않습니다. 나는 시도했다 :

img.test { height: 50%; }

현재 Google Chrome (2.0.172)에서는 다소 일치하지 않습니다. 크기는 정확하지만 모든 창 드래그 후에 업데이트되지 않습니다. 현재 Firefox (3.5)에서는 높이가 완전히 무시되는 것 같습니다. 나는 최근의 원격으로 최근에 테스트 할 IE, 사파리 등이 없습니다. 그 결과를 자유롭게 편집하십시오. 그것들이 잘 지내더라도 여전히 당신이 피하고 싶은 것이고 너비를 고수 할 것입니다.

편집하다:이 작업을 위해서는 IMG.Test를 포함하는 모든 요소의 크기가 정적으로 아닌 비율로 크기를 조정해야합니다.

이런 식으로 생각하십시오 :

• 본체는 창 크기의 100%입니다.
• IMG는 신체의 50%입니다.
• IMG는 창 크기의 50%입니다.

이제 내가 div를 추가한다고 가정 해 봅시다. 이와 같이...

<div class="imgbox" style="width: 100px;">
  <img class="test" src="testimage.jpg" />
</div>

그 다음에

• 본체는 창 크기의 100%입니다.
• Div는 100px이며 신체 너비를 무시합니다.
• IMG는 Div의 50%입니다.
• IMG는 창 크기에 관계없이 50px입니다.

DIV에 "너비 : 100%"가 있다면 논리는 이전과 동일하게 작동합니다. 고정되지 않은 비율이 아닌 한 IMG의 백분율로 플레이하고 원하는 크기를 해결할 수 있습니다.

Answer 2

내 CSS는 쓰레기이기 때문에 약간의 추측이지만 아무도 대답하지 않기 때문에 이미지에서 % 너비 또는 높이 또는 둘 다를 설정하여 부모의 백분율이되도록하는 것은 어떻습니까? Dunno?

Answer 3

최대 세포를 95%와 같은 것으로 설정하십시오. 컨테이너 너비가 이미지의 너비보다 작을 때 이미지가 줄어드는 방법에 감사드립니다. 모든 상위 컨테이너는 조정해야합니다

max-width:95%;