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


84

내 웹 사이트에서 사용자가 업로드 한 이미지를 특정 크기 ( 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 폴더 외부에 저장 됨).


1
자동으로 축소하려면 max-width설정 max-height하고 설정하지 않으면 작동합니다. 그렇지 않다면 다른 사람들이 문제를 발견 할 수 있도록 코드를 게시하십시오.
Ray Cheng

2
나는 당신의 예를 시도했고 여기에서 작동합니다. 이 예제에서와 같이 실제 HTML ( "ImageContainerr")에 동일한 오타가없는 것이 확실합니까?
Mr Lister

젠장, 당신 말이 맞아요. Tomcat과 브라우저를 다시 시작하고 다시 시도했는데 정말 잘 작동합니다. 어쨌든 고마워요 :) 오타는 사실이 아닙니다. 이해하기 쉽도록 여기에서 ID와 클래스 이름을 변경했습니다.
user1315305

3
이것으로부터 나는 당신이 Firebug 또는 다른 개발자 도구를 사용하지 않는다고 가정합니다. 나는 당신이 Firebug를 얻고 그것을 사용하는 법을 배우는 것이 좋습니다. (이 두 요소를 검사하면 너비가 컨테이너에 추가되지 않았 음을 알 수 있습니다.)
Joonas

2
경고 :이 질문은 처음 나타나는 것보다 훨씬 광범위하게 적용되지 않습니다. 많은 찬성 투표자들이id여기가 CSS와 일치하지 않는다는사실을 놓 쳤기 때문인 것같습니다. 작성된대로 (20151201),이 질문은 "어떤 DOM 객체와도 일치하지 않는 CSS 선택자는 모양에 영향을주지 않습니다"로 요약됩니다. ; ^) (그림이) ... 편집 제목이하는 여부 무엇을 의미하는지 묻는 질문에 좋을 것 할 수없는 경우
러핀

답변:


133

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

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

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


감사합니다! 완벽하게 작동합니다! 편집 : 음, 정확하지는 않습니다. 600px보다 작은 이미지의 크기도 조정합니다. 그것은 내가 원하지 않는 것입니다.
user1315305

3
나는 투표했다. OP가 원하는 것은 당신이 제공하는 것이 아닙니다. 당신은 또한 OP의 코드에 문제가있을 수 있다는 것을 깨달았어야합니다. 그가 시도한 것은 정상적으로 작동해야하기 때문입니다. 누가 투표를했는지, 이유를 알려주세요. 감사합니다.
Joonas

1
@Lollero 첫 번째 OP는 내 대답 후 질문을 편집하고 내 대답에 무엇이 잘못되었는지 설명 할 수 있습니까? 감사
하기 Sandeep

2
이것은 IE에서 종횡비를 보존하지 않습니다
Cocowalla 2013 년

1
"width : 100 %"의 목적은 무엇입니까? 연결된 바이올린이 없으면 제대로 작동하는 것 같습니다. (맥 OX에 파이어 폭스와 사파리에서 테스트)
존 슈나이더에게

12

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

최대 너비는 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">

5

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

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

img.Image{
    display: inline-block;
}

3

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

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

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

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

#ImageContainer img {
    width: 600px;
}

또한 OP에 대한 의견은 CSS 파일에서 잘못된 ID를 사용하고 있음을 나타냅니다. div # ImageContainer는 <div id = "ImageContainerr">과 동일하지 않습니다.
Leo Armentano

1

이 시도

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

1
그것은 정확하지 않습니다. 선택기는 "이미지 요소 내부의 img 요소"를 의미합니다.
Mr Lister

0

귀하의 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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.