{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/16940","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/16940/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/16940/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/16940/events","html_url":"https://github.com/twbs/bootstrap/issues/16940","id":99185998,"number":16940,"title":"img-responsive and Firefox 39.0","user":{"login":"PELock","id":7449321,"avatar_url":"https://avatars.githubusercontent.com/u/7449321?v=3","gravatar_id":"","url":"https://api.github.com/users/PELock","html_url":"https://github.com/PELock","followers_url":"https://api.github.com/users/PELock/followers","following_url":"https://api.github.com/users/PELock/following{/other_user}","gists_url":"https://api.github.com/users/PELock/gists{/gist_id}","starred_url":"https://api.github.com/users/PELock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PELock/subscriptions","organizations_url":"https://api.github.com/users/PELock/orgs","repos_url":"https://api.github.com/users/PELock/repos","events_url":"https://api.github.com/users/PELock/events{/privacy}","received_events_url":"https://api.github.com/users/PELock/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-08-05T11:44:07Z","updated_at":"2015-08-25T06:18:41Z","closed_at":"2015-08-05T15:55:37Z","body":"Firefox cannot handle properly .img-responsive class for the thumbnails, it ignores the default max-width property and stretches out the image within the .thumbnail container if the image is wider than the container itself. Default settings for the .img-responsive class:\r\n```\r\n.img-responsive(@display: block) {\r\n  display: @display;\r\n  max-width: 100%; // Part 1: Set a maximum relative to the parent\r\n  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching\r\n}\r\n```\r\nThis class is inherited by .thumbnail class for all the images:\r\n```\r\n.thumbnail {\r\n  ...\r\n  > img,\r\n  a > img {\r\n    &:extend(.img-responsive);\r\n    ...\r\n}\r\n```\r\nI'm using sample code from http://getbootstrap.com/components/#thumbnails to display the thumbnails.\r\n\r\nI've tried to set \"width: 100%\" to the .img-responsive and it works fine, until I've figured it out all the images not within the .thumbnail class container are stretched out.\r\n\r\nThe solution that works for Firefox for Windows and Android is to add \"width: 100%\" to the:\r\n```\r\n.thumbnail {\r\n  ...\r\n  > img,\r\n  a > img {\r\n    &:extend(.img-responsive);\r\n    width: 100%;\r\n    ...\r\n}\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/134493319","html_url":"https://github.com/twbs/bootstrap/issues/16940#issuecomment-134493319","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/16940","id":134493319,"user":{"login":"lookfirst","id":85355,"avatar_url":"https://avatars.githubusercontent.com/u/85355?v=3","gravatar_id":"","url":"https://api.github.com/users/lookfirst","html_url":"https://github.com/lookfirst","followers_url":"https://api.github.com/users/lookfirst/followers","following_url":"https://api.github.com/users/lookfirst/following{/other_user}","gists_url":"https://api.github.com/users/lookfirst/gists{/gist_id}","starred_url":"https://api.github.com/users/lookfirst/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lookfirst/subscriptions","organizations_url":"https://api.github.com/users/lookfirst/orgs","repos_url":"https://api.github.com/users/lookfirst/repos","events_url":"https://api.github.com/users/lookfirst/events{/privacy}","received_events_url":"https://api.github.com/users/lookfirst/received_events","type":"User","site_admin":false},"created_at":"2015-08-25T06:18:40Z","updated_at":"2015-08-25T06:18:40Z","body":"@cvrebert \r\n\r\nFF with width: 100%: http://take.ms/eBtka\r\nFF without width 100%: http://take.ms/dxiQ6 (broken)\r\n\r\nChrome (without width 100%): http://take.ms/clkL7\r\n"}}