{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/21885","repository_url":"https://api.github.com/repos/twbs/bootstrap","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/21885/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/21885/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/21885/events","html_url":"https://github.com/twbs/bootstrap/issues/21885","id":204258654,"number":21885,"title":"Wrong Img-Height when using 'img-fluid' inside a card","user":{"login":"PoisonSin","id":25454388,"avatar_url":"https://avatars3.githubusercontent.com/u/25454388?v=4","gravatar_id":"","url":"https://api.github.com/users/PoisonSin","html_url":"https://github.com/PoisonSin","followers_url":"https://api.github.com/users/PoisonSin/followers","following_url":"https://api.github.com/users/PoisonSin/following{/other_user}","gists_url":"https://api.github.com/users/PoisonSin/gists{/gist_id}","starred_url":"https://api.github.com/users/PoisonSin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PoisonSin/subscriptions","organizations_url":"https://api.github.com/users/PoisonSin/orgs","repos_url":"https://api.github.com/users/PoisonSin/repos","events_url":"https://api.github.com/users/PoisonSin/events{/privacy}","received_events_url":"https://api.github.com/users/PoisonSin/received_events","type":"User","site_admin":false},"labels":[{"id":210556,"url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c","default":false},{"id":467471091,"url":"https://api.github.com/repos/twbs/bootstrap/labels/has-pr","name":"has-pr","color":"666666","default":false},{"id":250176882,"url":"https://api.github.com/repos/twbs/bootstrap/labels/v4","name":"v4","color":"563d7c","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/twbs/bootstrap/milestones/41","html_url":"https://github.com/twbs/bootstrap/milestone/41","labels_url":"https://api.github.com/repos/twbs/bootstrap/milestones/41/labels","id":2206502,"number":41,"title":"v4.0.0-beta","description":"","creator":{"login":"mdo","id":98681,"avatar_url":"https://avatars3.githubusercontent.com/u/98681?v=4","gravatar_id":"","url":"https://api.github.com/users/mdo","html_url":"https://github.com/mdo","followers_url":"https://api.github.com/users/mdo/followers","following_url":"https://api.github.com/users/mdo/following{/other_user}","gists_url":"https://api.github.com/users/mdo/gists{/gist_id}","starred_url":"https://api.github.com/users/mdo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdo/subscriptions","organizations_url":"https://api.github.com/users/mdo/orgs","repos_url":"https://api.github.com/users/mdo/repos","events_url":"https://api.github.com/users/mdo/events{/privacy}","received_events_url":"https://api.github.com/users/mdo/received_events","type":"User","site_admin":true},"open_issues":0,"closed_issues":392,"state":"closed","created_at":"2016-12-20T05:42:49Z","updated_at":"2017-08-11T05:05:32Z","due_on":null,"closed_at":"2017-08-11T04:49:33Z"},"comments":18,"created_at":"2017-01-31T10:40:49Z","updated_at":"2018-04-29T14:38:07Z","closed_at":"2017-03-28T05:52:25Z","author_association":"NONE","body":"When you use an image with class 'img-fluid' within a 'card', the width is correct but the height is the original height of the image.\r\n\r\nhttps://jsfiddle.net/6Lef7tzo/\r\n\r\nThis happens because the card has now the style 'display: flex'. If i style the card with 'display: block' everthing works fine!\r\n\r\nBootstrap 4 Alpha 6\r\n\r\nChrome + Firefox OK!\r\nIE 11 = bug\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/385256050","html_url":"https://github.com/twbs/bootstrap/issues/21885#issuecomment-385256050","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/21885","id":385256050,"user":{"login":"bluntfest","id":16021515,"avatar_url":"https://avatars2.githubusercontent.com/u/16021515?v=4","gravatar_id":"","url":"https://api.github.com/users/bluntfest","html_url":"https://github.com/bluntfest","followers_url":"https://api.github.com/users/bluntfest/followers","following_url":"https://api.github.com/users/bluntfest/following{/other_user}","gists_url":"https://api.github.com/users/bluntfest/gists{/gist_id}","starred_url":"https://api.github.com/users/bluntfest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bluntfest/subscriptions","organizations_url":"https://api.github.com/users/bluntfest/orgs","repos_url":"https://api.github.com/users/bluntfest/repos","events_url":"https://api.github.com/users/bluntfest/events{/privacy}","received_events_url":"https://api.github.com/users/bluntfest/received_events","type":"User","site_admin":false},"created_at":"2018-04-29T14:38:07Z","updated_at":"2018-04-29T14:38:07Z","author_association":"NONE","body":"Not sure if this will help or not, but I just spent some time playing around and I think I've got my page displaying the same on all 3 browsers I am testing (IE11, Chrome & Firefox (both latest versions)).\r\n\r\nI was using h-100 inside the card-img-top like so: `<img class=\"card-img-top h-100\"`\r\nto fix the tall images in IE11, worked like a charm.\r\n\r\nBut of course after I did this, Chrome decided it wanted to look like IE11 did before I added h-100, thus defeating the purpose of using h-100 to fix the IE11 issue because now the issue was replicated in Chrome.\r\n\r\nI ended up removing the h-100 and setting a custom height in my custom styles.css file for the card-img-top... `.card-img-top { height: 300px; }` was mine.\r\n\r\nNow all 3 browsers are showing the images as the same height. It worked for me as all my images get resized to 500px by 500px so showing them as 300px in the listing is no big deal (may not work for people who have varying dimensions).\r\n\r\nHope this helps someone."}}
{"actor":{"display_login":"bluntfest"}}