이미지를 (동적 크기로 제한없이) 부모 div만큼 넓게하려고하지만 너비가 자체 너비보다 100 % 넓지 않는 한 이미지를 얻으려고합니다. 나는 이것을 시도했지만 아무 소용이 없었다.
img {
width: 100%;
height: auto;
max-width: 100%;
}이 이미지의 대부분은 부모 div보다 넓기 때문에 그에 따라 크기를 조정하고 싶지만 작은 이미지가 거기에 나타나고 일반 크기보다 확장되면 실제로 끔찍하게 보입니다. 이 작업을 수행하는 방법이 있습니까?
답변
max-width: 100%혼자 지정 하면됩니다.
답변
Google 검색 에서이 게시물을 찾았으며 @jwal 회신 덕분에 문제를 해결했지만 그의 해결책에 하나를 추가했습니다.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}위의 내용으로 최대 너비를 이미지가있는 콘텐츠 컨테이너의 크기로 변경했습니다.이 경우 컨테이너 너비-패딩-보더 = 최대 너비
이렇게하면 내 이미지가 포함 된 div를 벗어나지 않고 콘텐츠 div 내에서 이미지를 플로팅 할 수 있습니다.
IE 9, FireFox 18.0.2 및 Chrome 25.0.1364.97, Safari iOS에서 테스트했으며 작동하는 것 같습니다.
추가 : 678px (최대 너비)로 표시된 1024px 너비의 이미지와 500px (이미지 너비)로 표시된 500px 너비의 이미지에서 이것을 테스트했습니다.
답변
너비를 100 %로 설정하면 원래의 전체 크기 이미지가 아닌 div의 전체 너비가됩니다. 자바 스크립트 나 이미지를 측정 할 수있는 다른 스크립팅 언어 없이는 그렇게 할 수 없습니다. 너비가 200px와 같이 div의 고정 너비 또는 고정 높이를 가질 수 있으면 이미지에 채울 범위를 지정하기 가 너무 어렵지 않아야합니다 . 그러나 200×300 픽셀 상자에 20×20 픽셀 이미지를 넣으면 여전히 왜곡됩니다.
답변
선 스타일-이것은 매번 나에게 효과적입니다.
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>답변
최대 너비를 설정해야하며 원하는 경우 측면 중 하나에 패딩을 설정할 수도 있습니다. 필자의 경우 최대 너비 : 100 %는 좋지만 이미지는 화면 끝 옆에있었습니다.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/답변
나는 또한 같은 문제가 있었지만 CSS의 높이 값을 자동으로 설정하면 문제가 해결되었습니다. 또한 display 속성을 수행하는 것을 잊지 마십시오.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}