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]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.

---

Got here after trying to figure out if it's safe to apply img-responsive for all images.

The answer by @its_me led me to think that it isn't safe to apply this for images under a p element.

This does not seems to be what the bootstrap team think.

This is why images are not responsive by default in bootstrap3:

The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.

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

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