Bootstrap4におけるcol内コンテンツの最大幅(px)

Bootstrap4では、グリッドシステムにおけるcontainer内の要素の最大幅が1170pxから1140pxに変更されました。
グリッドシステムを利用したとき、それぞれのcol内で使用する画像の大きさをどのように指定すべきか悩むことがしばしばあるため、col数ごとの最大幅をメモしておきます。

col数ごとの最大幅(px)を計算してみる

.colには左右のpaddingが15pxずつ指定されています。
.containerの内側の要素の最大幅は1140px(paddingを含めた要素の幅は1170px)で、これはcol-12を指定した際の最大幅と等しい値です。

よって、1170pxを12等分したのちpadding分の30pxを引いた値が、colのpaddingを除いた最大幅になります。
col数をnとすると、以下のようになります。

col-n = 1170 / 12 * n – 30

col コンテンツの最大幅
col-1 67.5px
col-2 165px
col-3 262.5px
col-4 360px
col-5 457.5px
col-6 555px
col-7 652.5px
col-8 750px
col-9 847.5px
col-10 945px
col-11 1042.5px
col-12 1140px

(e.g.)col-6の最大幅を考慮したちょうどいいサイズの画像を用意する場合、幅を555pxで作成するといい。
※入れ子の場合はまた計算しないと…。