Afbeeldingen die standaard niet reageren in Twitter Bootstrap 3?

Het lijkt erop dat ik met de nieuwe versie 3.0 de klassenamen van een afbeelding moet instellen op col-lg-4 col-sm-4 col-4als de afbeelding deel uitmaakt van div met dezelfde klassenamen om de afbeelding responsief te maken met alle breekpunten.

In versie 2 hebben de CSS-eigenschappen van afbeeldingen standaard de div-eigenschappen van de ouder overgenomen.

Is dit correct?

Antwoord 1, autoriteit 100%

Bootstrap 4

Gebruik voor Bootstrap 4 Sass (SCSS):

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

antwoord bijgewerkt voor versie 3

Bootstrap 3 heeft een speciale klasse voor responsieve afbeeldingen (stel de maximale breedte in op 100%). Deze klasse is gedefinieerd als:

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

Opmerking img-tag krijgt standaard:

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

Gebruik dus class="img-responsive"om uw afbeeldingen responsief te maken.

Om alle afbeeldingen standaard responsief te maken:

css:voeg de onderstaande code toe onder de bootstrap css:

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

less:voeg de onderstaande code toe aan je mixins.less:

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

Opmerking: vereist Less 1.4.0. zie: https://stackoverflow.com/a/15573240/1596547

Carrousel

img-tags in een carrouselreageren standaard

Semantische regels

Zie ook het antwoord van @its-me(https://stackoverflow.com/a/18653778/1596547). Als u het bovenstaande gebruikt om al uw afbeeldingen standaard responsief te maken, worden uw afbeeldingen op blokniveau elementen. Elementen op blokniveau zijn niet toegestaan ​​in alinea’s (<p>), zie: https://stackoverflow. com/a/4291515/1596547

Voor zover ik begrijp is het onderscheid tussen blokniveau versus inline-elementen vervangen door een complexere set inhoudscategorieën. Zie ook: https://developer.mozilla. org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
Dus in HTML5 kan een p-tag elk fraseringselement bevatten vermengd met normale tekengegevens. (zie: http://www.w3.org/TR/html-markup/ p.html) De imgtag is zo’n fraseringselement. De standaardwaarde van de tag imgvoor de eigenschap display is inderdaad inline-block. Het wijzigen van de weergave-eigenschap naar blokkeren is niet in strijd met een van de voorgaande regels.

Blokniveau-elementen (display:block) nemen alle beschikbare ruimte van hun bovenliggende in beslag, wat precies lijkt wat je verwacht voor responsieve afbeeldingen. Dus het instellen van display: block;lijkt een redelijke keuze, die de voorkeur verdient boven de inline-blockdeclaratie.

Afbeeldingen binnen p-elementen die inline-blockvereisen, zoals gesuggereerd door @its-me(https://stackoverflow.com/a/18653778/1596547) zou misschien helemaal niet moeten reageren.

Antwoord 2, autoriteit 9%

Uitstekende suggestie van @BassJobsen, maar ik zou display: inline-block;gebruiken in plaats van display: block;omdat dat semantischer aanvoelt ¹(wat betekent dat je er een beetje zekerder van kunt zijn dat je niet ergens anders een rommeltje maakt).

Dus de mijne zou er zo uitzien:

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

Laat het me weten als ik het niet goed begrijp. 🙂

[1]: Ten eerste zijn afbeeldingen bijna altijd verpakt in een blok- niveau-element als dat het geval is; en aan de andere kant gebruiken we ook afbeeldingen in elementen zoals alinea’s (p), waar een inline-blockpassender zou zijn dan een block-element .

Antwoord 3

Ik ben hier terechtgekomen nadat ik had geprobeerd uit te zoeken of het veilig is om img-responsivetoe te passen op alle afbeeldingen.

Het antwoord van @its_me deed me denken dat het niet veilig is om dit toe te passen voor afbeeldingen onder een p-element.

Dit lijkt niet te zijn wat het bootstrap-team denkt.

Dit is de reden waarom afbeeldingen standaard niet reageren in bootstrap3:

De samenvatting is dat het een heleboel nietsvermoedende widgets van derden (inclusief Google Maps) verbreekt, die begrijpelijkerwijs niet verwachten dat de afbeeldingen erin gedwongen worden aangepast aan andere breedtes. Daarom hebben we Bootstrap v2’s “afbeeldingen zijn standaard responsief”-aanpak in Bootstrap v3 teruggedraaid ten gunste van een expliciete .img-responsieve klasse.

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