{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/18833","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/18833/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/18833/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/18833/events","html_url":"https://github.com/twbs/bootstrap/issues/18833","id":125825299,"number":18833,"title":"Refactor embed-responsive to embrace images too","user":{"login":"saviomd","id":1065210,"avatar_url":"https://avatars.githubusercontent.com/u/1065210?v=3","gravatar_id":"","url":"https://api.github.com/users/saviomd","html_url":"https://github.com/saviomd","followers_url":"https://api.github.com/users/saviomd/followers","following_url":"https://api.github.com/users/saviomd/following{/other_user}","gists_url":"https://api.github.com/users/saviomd/gists{/gist_id}","starred_url":"https://api.github.com/users/saviomd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/saviomd/subscriptions","organizations_url":"https://api.github.com/users/saviomd/orgs","repos_url":"https://api.github.com/users/saviomd/repos","events_url":"https://api.github.com/users/saviomd/events{/privacy}","received_events_url":"https://api.github.com/users/saviomd/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/twbs/bootstrap/labels/css","name":"css","color":"563d7c"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/feature","name":"feature","color":"4bb14b"},{"url":"https://api.github.com/repos/twbs/bootstrap/labels/v4","name":"v4","color":"563d7c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-10T15:07:30Z","updated_at":"2016-01-11T12:27:00Z","closed_at":null,"body":"The ```.embed-responsive``` reserves document space to the element, avoiding layout recalculation.\r\nBut the ```.img-responsive``` (```.img-fluid``` in v4) doesn't do that.\r\nDave Rupert expanded the responsive video solution to images to solve this (and gave it a background color, so you know the space will be filled with something):\r\nhttp://daverupert.com/2015/12/intrinsic-placeholders-with-picture/\r\n\r\nI think it would be nice to refactor ```.embed-responsive``` as ```.media-responsive``` (or media-fluid to follow the new image nomenclature) to embrace images too and include the following new classes:\r\n- ```.embed-responsive-1by1``` for squared images like avatars (and videos too, instagram and vine videos are squared)\r\n- ```.embed-responsive-9by21```, ```.embed-responsive-9by16```, ```.embed-responsive-3by4``` for portrait images\r\n\r\n(I think img-fluid should still exist, there will be cases when the images dimension will not follow a pattern: a news site can have a squared image in a article, and a 16x9 in another article)\r\n"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/170527214","html_url":"https://github.com/twbs/bootstrap/issues/18833#issuecomment-170527214","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/18833","id":170527214,"user":{"login":"saviomd","id":1065210,"avatar_url":"https://avatars.githubusercontent.com/u/1065210?v=3","gravatar_id":"","url":"https://api.github.com/users/saviomd","html_url":"https://github.com/saviomd","followers_url":"https://api.github.com/users/saviomd/followers","following_url":"https://api.github.com/users/saviomd/following{/other_user}","gists_url":"https://api.github.com/users/saviomd/gists{/gist_id}","starred_url":"https://api.github.com/users/saviomd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/saviomd/subscriptions","organizations_url":"https://api.github.com/users/saviomd/orgs","repos_url":"https://api.github.com/users/saviomd/repos","events_url":"https://api.github.com/users/saviomd/events{/privacy}","received_events_url":"https://api.github.com/users/saviomd/received_events","type":"User","site_admin":false},"created_at":"2016-01-11T12:27:00Z","updated_at":"2016-01-11T12:27:00Z","body":"Oops, my bad.. still messing with alpha 1, will update to alpha 2 to get the new stuff\r\nBut what do you think about renaming the module and adding classes for portrait elements? Do you think it's valid?"}}