이미지의 최대 너비와 높이를 설정하는 CSS 또는 HTML 도움말

사용자의 프로필 사진이 표시된 테이블에 블록이 있습니다. 하지만 디자인 공간을 유지하기 위해 가로 200 픽셀, 세로 300 픽셀의 블록 크기를 만들었습니다. 지금은 사용자의 사진에 아래의 CSS 스타일을 설정 :이미지의 최대 너비와 높이를 설정하는 CSS 또는 HTML 도움말

.max{ 
max-width:200px; 
max-height:300px; 
}

을 큰 그림 (가 300x400 픽셀을 가정)가 있다면, 그것은 다시 크기를 200x300 픽셀 (잘)에. 하지만 내 문제는 작은 그림 (100x150px라고 가정)이있는 경우 200x300px 크기로 다시 크기가 조정된다는 것입니다. 하지만 최대 너비와 높이를 설정하고 싶습니다. 따라서 제 경우에는 200x300px보다 작 으면 사진의 원래 크기를 표시하고 싶습니다. 그러나 큰 그림 인 경우 크기가 200x300px로 다시 조정됩니다. 어떤 도움 plz (어떻게 할 수 있습니까?) ... - (인터넷 익스플로러 8.0 테스트)

CSS에서 할 수 없다면, html은 자바 스크립트에서 할 수있는 옵션이 있습니까? 유용한 소스가 있습니까?

출처

2011-09-27 Haren Sarma

우리는 아마도 더 많은 HTML/CSS가 도움이 될 것입니다. 문제는 아마'max' 클래스의 정의에 있지 않습니다. –

페이지를 작성할 때 이미지를 알고 있으면 간단한 ID 태그가 해결책이지만 사용자가 이미지를 업로드 할 때 스크립트 (PHP 또는 Javascript 등)를 사용해야하고 HTML 및 CSS 솔루션을 사용할 수 없을 수도 있습니다 – SpeedBirdNine

.max{ 
    height: auto; 
    max-width: 100%; 
}

는 200 픽셀로 TD 폭을 지정하고 테이블 - 테이블 레이아웃 : 고정. 나는 당신의 질문을 이해하면 문제 해결해야

, 당신은 자바 스크립트에 의존해야 할 수도 있습니다 ...

출처

2011-09-27 18:11:02 Bala

당신의 대답은 나를 위해 일했습니다 ... 감사합니다. –

-1

당신이 말하는 것은 상당히 이상합니다.

실제로는 max-*이 아닌 width과 height으로 설정되어있는 것처럼 들립니다.

간단한 fiddle을 만들고 문제가 남아 있는지 확인해보십시오. 그렇다면 URL을 게시하면 조사 할 수 있습니다.

출처

2011-09-27 18:04:21 Guard

너비와 높이의 최대 값은 최대입니다. 따라서 더 작은 이미지에는 영향을주지 않아야합니다.

난 그냥 텍스트 HTML 페이지를 만들었고 작은 이미지는 최대 높이와 너비 세트로 잘 동작했습니다.

출처

2011-09-27 18:08:33

당신은 사용할 수 있습니다

.max { 
    max-width: expression(this.width > 200 ? 200: true); 
}

출처

2011-09-27 18:10:43

는 CSS에 대해 잘 모르지만이 JQuery와

$('.images_class').each(function(){ 
    height = $(this).height(); 
    width = $(this).width(); 
    if(height > 200 || width > 300) 
    $(this).css('height','200px').css('width','300px'); 
});

출처

2011-09-27 18:13:48

에 그것을해야 정확하게 같은 것을 그것을 할 수 있습니다

$(document).ready(function(){ 

$('img').each(function(){ 
    if( ($(this).width() < 200) && ($(this).height() < 300)){ 
     $(this).css({'width' : $(this).width() +'px', 'height' : $(this).height() + 'px')   
    } 
})

})

... t jQuery와 관련된 것이고 테스트 할 기회도 없었습니다.

출처

2011-09-27 18:14:11 vector

이미지의 최대 너비와 높이를 설정하는 CSS 또는 HTML 도움말

답변

관련 문제