Twitter Bootstrap 3에서 기본적으로 이미지가 반응하지 않습니다.

Twitter Bootstrap 3에서 기본적으로 이미지가 반응하지 않습니다.

---

새 버전 3.0은 col-lg-4 col-sm-4 col-4모든 중단 점에 반응하는 이미지가 동일한 클래스 이름을 가진 div의 일부인 경우 이미지의 클래스 이름을 설정 해야하는 것처럼 보이게 합니다.

버전 2에서 이미지 CSS 속성은 기본적으로 부모의 div 속성을 상속받습니다.

이 올바른지?

---

부트 만 4

Bootstrap 4의 경우 Sass (SCSS)를 사용합니다.

// make images responisve by default
img {
  @extend .img-fluid;    
}

버전 3에 대한 답변 업데이트

Bootstrap 3에는 반응 형 이미지에 대한 특수 클래스가 있습니다 (최대 너비를 100 %로 설정). 이 클래스는 다음과 같이 정의됩니다.

.img-responsive {
 display: block;
 height: auto;
 max-width: 100%;
}

img 태그는 기본적으로 가져옵니다.

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

따라서 class="img-responsive"이미지를 반응 형으로 만드는 데 사용하십시오.

기본적으로 모든 이미지를 반응 형으로 만들려면 :

css : 부트하는 CSS는 아래에 코드를 추가합니다.

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

less : mixins.less에 아래 코드를 추가하세요.

img {
  &:extend(.img-responsive);
}

참고 : 1.4.0 미만이 필요합니다. 참조 : https://stackoverflow.com/a/15573240/1596547

캐 러셀

캐 러셀 내부의 img 태그 는 기본적으로 반응합니다.

의미 규칙

@ its-me ( https://stackoverflow.com/a/18653778/1596547 ) 의 답변도 참조하십시오 . 위의 방법을 사용하여 기본적으로 모든 이미지를 반응 형으로 만들면 이미지가 블록 수준 요소로 전환 합니다. 단락 ( <p>) 에는 블록 수준 요소가 허용되지 않습니다 . https://stackoverflow.com/a/4291515/1596547을 참조하십시오.

내가 이해하는 한 블록 수준과 인라인 요소의 구분은 더 복잡한 콘텐츠 범주 집합으로 대체됩니다. 참조 : https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level . 따라서 HTML5에서 ap 태그는 일반 문자 데이터와 혼합 된 모든 구문 요소를 포함 할 수 있습니다. (참조 : http://www.w3.org/TR/html-markup/p.html ) img태그는 모델 구문 요소입니다. img디스플레이 속성에 대한 태그의 기본 값은 참입니다 inline-block. 표시 속성을 차단으로 변경해도 이전 규칙을 위반하지 않습니다.

블록 수준 요소 ( display:block)는 부모의 사용 가능한 모든 공간을 차지하며, 이는 반응 형 이미지에 정확히 예상되는 것과 일치합니다. 따라서 display: block;선택은 선택으로 보이며 inline-block보다 우선 해야합니다.

@ its-me ( https://stackoverflow.com/a/18653778/1596547 )의 inline-block제안에 따라 필요한 p 요소 내부의 이미지 는 전혀 반응하지 않습니다.

---

@BassJobsen의 훌륭한 제안이지만 더 의미론 ¹ 느낌이 들기 때문에 display: inline-block;대신 사용할 것입니다 (즉, 다른 곳에서 엉망이하지 않는다는 것을 더 확신 할 수 있음을 의미합니다).display: block;

그래서 내 것은 다음과 같습니다.

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

내 이해에 결함이 있으면 알려주십시오. :)

---

[1] : 하나의 경우, 이미지는 사용 사례 인 경우 거의 항상 블록 수준 요소로 래핑됩니다. 그런 다음 다시 단락 (p)과 같은 요소에 이미지를 사용합니다. 여기서 aninline-block이block요소보다 더 적합합니다.

---

img-responsive모든 이미지 를 신청하는 것이 안전한지 확인한 후 여기에 왔습니다 .

@its_me의 대답은 p요소 아래의 이미지에 이것을 적용하는 것이 안전하지 않다고 생각하게했습니다 .

이것은 부트 스트랩 팀이 생각하는 것과 같지 않습니다.

이것이 bootstrap3에서 이미지가 기본적으로 응답하지 않는 이유입니다.

요약하자면 Google지도를 포함하여 의심 할 여지가없는 수많은 타사 위젯을 무너 뜨리며, 그 안에있는 이미지가 다른 너비로 강제로 크기가 조정될 것으로 예상하지 않습니다. 이것이 우리가 Bootstrap v3에서 명시적인 .img 반응 클래스를 선호하는 Bootstrap v2의 "이미지가 기본적으로 반응합니다"접근 방식을 롤백 한 이유입니다.

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

참조 URL : https://stackoverflow.com/questions/17932509/images-not-responsive-by-default-in-twitter-bootstrap-3