diff options
| author | Mark Otto <markd.otto@gmail.com> | 2017-03-28 08:52:24 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-03-28 08:52:24 +0300 |
| commit | fe3acc097ac9def6569f471ef25d444020c30057 (patch) | |
| tree | 16f002d6ab8f3be49439bbfa08da6e4eed0b240f /scss/_card.scss | |
| parent | 24924c23b24c1b196c42166ebe9a17d31f0ee720 (diff) | |
Card image fixes (#22288)
* fix image stretching due to flexbox
* fix broke text-muted on dark bg
* no img-fluid needed
Diffstat (limited to 'scss/_card.scss')
| -rw-r--r-- | scss/_card.scss | 12 |
1 files changed, 7 insertions, 5 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index 9fe70e8cf6..99f7c21958 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -158,10 +158,6 @@ } // Card image -.card-img { - // margin: -1.325rem; - @include border-radius($card-border-radius-inner); -} .card-img-overlay { position: absolute; top: 0; @@ -171,13 +167,19 @@ padding: $card-img-overlay-padding; } - +.card-img { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch + @include border-radius($card-border-radius-inner); +} // Card image caps .card-img-top { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-border-radius-inner); } + .card-img-bottom { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-border-radius-inner); } |