[html] CSS에서 이미지의 최대 너비를 설정하는 방법

Program / 글쓴이

내 웹 사이트에서 사용자가 업로드 한 이미지를 특정 크기 ( width: 600px) 의 새 창에 표시하고 싶습니다 . 문제는 이미지가 클 수 있다는 것입니다. 따라서 이것보다 크면 600px가로 세로 비율을 유지하면서 크기를 조정하고 싶습니다.

max-widthCSS 속성을 시도했지만 작동하지 않습니다. 이미지의 크기가 변경되지 않습니다.

이 문제를 해결할 방법이 있습니까?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

나는 또한 max-width: 600px이미지에 대한 설정을 시도했지만 작동하지 않습니다. 이미지는 서블릿에서 스트리밍됩니다 (Tomcat의 webapps 폴더 외부에 저장 됨).

답변

다음과 같이 작성할 수 있습니다.

img{
    width:100%;
    max-width:600px;
}

http://jsfiddle.net/ErNeT/ 확인

답변

나는 이것이 최종적으로 대답되지 않은 것을 봅니다.

최대 너비는 100 %이고 너비는 600입니다. 뒤집습니다.

간단한 방법은 다음과 같습니다.

     <img src="image.png" style="max-width:600px;width:100%">

나는 이것을 자주 사용하고 개별 이미지도 제어 할 수 있으며 모든 img 태그에 포함되지는 않습니다. 아래처럼 CSS를 사용할 수도 있습니다.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

답변

문제는 img 태그가 인라인 요소이고 인라인 요소의 너비를 제한 할 수 없다는 것입니다.

따라서 img 태그 너비를 제한하려면 먼저 인라인 블록 요소로 변환해야합니다.

img.Image{
    display: inline-block;
}

답변

컨테이너 너비가 600px로 주어집니다.

그보다 더 큰 이미지 만 안에 넣으려면 다음을 추가하십시오. CSS :

#ImageContainer img {
    max-width: 600px;
}

모든 이미지가 사용 가능한 (600px) 공간을 차지하도록하려면 :

#ImageContainer img {
    width: 600px;
}

답변

이 시도

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

답변

귀하의 CSS가 거의 정확합니다. display: block;이미지 CSS에서 누락되었습니다 . 또한 ID에 오타가 하나 있습니다. 그것은해야한다<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>

스 니펫 확장

답변