이미지 너비를 부모 div의 100 %로 설정하지만 자체 너비보다 크지 않아야합니다.

이미지를 (동적 크기로 제한없이) 부모 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의 고정 너비 또는 고정 높이를 가질 수 있으면 이미지에 채울 범위를 지정하기 가 너무 어렵지 않아야합니다 . 그러나 200x300 픽셀 상자에 20x20 픽셀 이미지를 넣으면 여전히 왜곡됩니다.

선 스타일-이것은 매번 나에게 효과적입니다.

<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;
 }  

나는 나를 위해 일한 답을 찾았고 다음 링크에서 찾을 수 있습니다.

제한된 너비의 부모에있는 전체 너비 컨테이너

이미지가 부모보다 작은 경우 ...

.img_100 {
  width: 100%;
}

나는 재산을 사용할 것이다 display: table-cell

여기 링크가 있습니다