이미지 너비를 부모 디브의 100%로 만들되 자신의 너비보다 크지 않게 만듭니다.

이미지 너비를 부모 디브의 100%로 만들되 자신의 너비보다 크지 않게 만듭니다.

저는 이미지(차원에 제한이 없는 동적으로 배치된 이미지)를 모체 디브처럼 넓히려고 노력하고 있지만, 그 너비가 100%에서 자신의 너비보다 넓지 않은 한에서만 가능합니다.나는 이것을 시도해 보았지만 소용이 없었습니다.

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

이러한 이미지의 대부분은 부모 디브보다 훨씬 더 넓기 때문에 크기를 조정하고 싶지만, 작은 이미지가 튀어나와 정상 크기 이상으로 커지면 정말 끔찍해 보입니다.이것을 할 수 있는 방법이 있습니까?

지정만 하면 됩니다.max-width: 100%혼자라면 충분할 겁니다

구글 검색에서 이 게시물을 찾았고, @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(이미지 너비)에 표시된 이미지에 대해 테스트했습니다.

너비를 100%로 설정하는 것은 원래 전체 크기의 이미지가 아닌 분할 영역의 전체 너비입니다.자바스크립트나 이미지를 측정할 수 있는 다른 스크립트 언어 없이는 이를 수행할 수 없습니다.디브의 고정된 너비 또는 고정된 높이(예: 200px 너비)를 가질 수 있다면 이미지를 채우기 위한 범위를 제공하는 것은 그리 어렵지 않을 것입니다.그러나 20x20 픽셀 이미지를 200x300 픽셀 상자에 넣어도 여전히 왜곡됩니다.

라인 스타일 - 이 제품은 항상 제게 적합합니다.

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

제가 작성한 코드는 다음과 같습니다.

div.image {
   height: auto;
   width: 100%;
}

div.image img {
    height: inherit;
    width: inherit;
}

최대 너비를 설정해야 하며 원한다면 측면 중 하나에 패딩을 설정할 수도 있습니다.제 경우에는 최대 너비: 100%는 좋았지만 화면 끝에 바로 옆에 이미지가 있었습니다.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

저도 같은 문제가 있었지만 CSS의 높이 값을 자동으로 설정하여 문제를 해결했습니다.또한 디스플레이 속성을 수행하는 것도 잊지 마세요.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

저는 제게 도움이 되는 답변을 찾았고 다음 링크에서 찾을 수 있습니다.

제한된 너비의 부모에서 전폭 컨테이너

발견했습니다.max-width:inherit;나를 위해 일했습니다

max-width: fit-content;나를 위해 일했습니다.

이미지가 상위 이미지보다 작은 경우...

.img_100 {
  width: 100%;
}

저는 그 부동산을 사용할 것입니다.display: table-cell

링크는 여기 있습니다.

언급URL : https://stackoverflow.com/questions/3463664/make-an-image-width-100-of-parent-div-but-not-bigger-than-its-own-width