페이지에 이미지 모음을 표시해야합니다. 이미지의 크기가 다르며 일부는 매우 넓고 일부는 매우 얇습니다. 고정 폭과 고정 높이의 컨테이너에 모두 넣고 싶습니다.HTML 이미지 크기 조정

이미지가 더 작 으면 우리는 크기를 유지하고 그것을 컨테이너의 중앙에 놓습니다. 이미지가 커지면 눈에 띄는 방향에 따라 이미지를 축소합니다.

컨테이너의 크기가 500x500이고 이미지의 크기가 1000x400 인 경우 500x200처럼 조정됩니다. 마찬가지로 이미지가 400x1000 인 경우 배율 조정 된 이미지는 200x500입니다. html/css로이 작업을 수행 할 수 있습니까? 어떤 도움을 주셔서 감사합니다. 감사.

출처

2010-07-15 Sainath Mallidi

아마도 나는 실제로 이것을 한 번도 해본 적이 없기 때문에 많은 실수를하고 있지만, img 태그의 너비와 높이 속성은이 문제를 해결하지 않습니까? – KdgDev

@WebDevHobo 너비와 높이로 이미지의 크기를 조정하지만 가로 세로 비율을 유지하지 않음 – mikek3332002

당신은 당신이 원하는 효과를 얻기 위해 max-width 및 max-height CSS 속성을 사용할 수 있습니다

#container img { 
    max-width:500px; 
    max-height:500px: 
}

이가 IE6에서 작동하지 않음을주의하십시오. 거기서 작동 시키려면 이미지 서버를 확장하거나 불쾌한 표현을 사용해야 할 수도 있습니다. Google에서 찾을 수있는 다른 해결 방법이 있습니다.

출처

2010-07-15 03:09:15

좋은 해결책. IE6에서는 어떤 일이 발생합니까? 일반적인 폭과 높이로 렌더링됩니까? –

IE6에서는 이해할 수없는 CSS 속성을 무시합니다. 허용되는 해결 방법을 찾을 수 있었습니까? –

+1이 솔루션은 y 축 또는 x 축의 종횡비가 500px보다 큰 것을 유지합니다. – JohnB

서버의 이미지 크기를 조정하면 훨씬 좋은 결과를 얻을 수 있습니다. 브라우저에서 크기 조정을하면 클라이언트가 필요한 것보다 훨씬 큰 파일을 다운로드하고 크기 조정 품질이 좋지 않음을 의미합니다.

출처

2010-07-15 03:09:36 Yisroel

다운로드 크기를 줄이는 데 동의하지만, 브라우저의 확장 성은 좋아지고 있습니다. –

이미지의 URL을 제공하는 서비스를 호출하여 이러한 이미지를 얻고 있으므로 서버에서 크기를 조정할 수 없습니다. –

아니요. htm 및 css에서는 완벽하게 처리 할 수 없습니다.

img{ width: 100% }

은 1000x400 이미지를 500x200로 표시합니다. 400x1000은 500x1200으로 표시됩니다.

당신은 같은 javascrpt 사용할 수 있습니다 내 아이폰을 지원하지 않습니다처럼

가난한 형식화하는 죄송

function scaleimage(id) 
{ 
    var image = document.getElementById(id); 
    if(image.offsetWidth > image.offsetHeight) 
    { 
     if(image.offsetWidth > 500) 
     { 
      image.offsetHeight = image.offsetHeight * 500/image.offsetWidth; 
      image.offsetWidth = 500; 
     } 
    } 
    else 
    { 
     if(image.offsetHeight > 500) 
     { 
      image.offsetWidth = image.offsetWidth * 500/image.offsetHeiht; 
      image.offsetHeight = 500; 
      } 
    } 
}

보인다.

출처

2010-07-15 03:22:26 Dani

는 그것을 줄 것이다. .. 지금 나는 최대 폭과 최대 높이와 함께 굴러 간다. –

서버에서 가장 좋은 방법입니다. 또는 업로드하기 전에 수동으로 (가능한 경우).

출처

2010-07-15 05:21:23 franzose

-1

당신은 당신이 원하는 효과를 얻기 위해 폭과 높이 CSS 속성을 사용할 수 있습니다 :

컨테이너 IMG {

width:500px; 
height:500px:

}

가주의를 모든 브라우저에서이 작품.

감사합니다. Ptiwari.

출처

2010-07-15 07:31:14 Prashant

불행히도 이것은 문제를 해결하지 못합니다. 나는 가장 긴 차원에서만 이미지를 스케일링하고 싶습니다 .. 그리고 팁을하면, 이미지는 우리가 이미지의 종횡비를 변경하면서보기 흉하게 보일 것입니다. –

HTML 이미지 크기 조정

답변

컨테이너 IMG {

관련 문제