{"id":4243,"date":"2018-04-05T17:07:07","date_gmt":"2018-04-05T17:07:07","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=4243"},"modified":"2018-04-09T15:37:29","modified_gmt":"2018-04-09T15:37:29","slug":"10-responsive-images-and-video","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/10-responsive-images-and-video\/","title":{"rendered":"10 Responsive Images and Video"},"content":{"rendered":"<p>Images and videos can be resized the same way that background images can be resized. Videos can maintain their proportion in what is a boon for responsive design. The <code>object-fit<\/code> and <code>object-position<\/code> properties define how an element responds to the height and width of its content box. The <code>object-fit<\/code> property implements cover and contain to determine the size of an image based on its longest or shortest length. There is also a <code>scale-down<\/code> value that keeps an image in proportion as it is resized (think video). The <code>object-position<\/code> property allows placement of the image in the box. The default is 50% 50% which centers the image. In the following demo, the images is enlarged to fill the box using cover, pinned to the left side center. The image will resize proportionally with a change in the box&#8217;s size. <\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#image-size img {\r\nwidth:100%; \r\nheight:100%;\r\nobject-fit: cover;\r\n\/* fill, contain, cover, none, scale-down *\/\r\nobject-position: 50% 50%;\r\n}\r\n#image-size {\r\nheight: 450px; \r\nwidth: 60%; \r\npadding: 10px; \r\nmargin: 20px auto; \r\nborder: 1px solid orange;\r\n}\r\n.video {\r\nwidth:100%; \r\nheight:100%;\r\nobject-fit: cover;\r\n}<\/style><\/pre>\n<\/div>\n<div id=\"image-size\">\n<img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08_transition-2.jpg\" alt=\"Taiyo in image size demonstration\" \/>\n<\/div>\n<h2>Video<\/h2>\n<\/p>\n<p>It is important to keep video ratio in proportion. Previous hacks used percentage based bottom padding of the parent container\u2019s width and stretched the video to that ratio. It\u2019s now possible to specify contain or scale-down. <\/p>\n<div id=\"image-size\">\n<p><video class=\"video\" id=\"video_style\" controls><source src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/10_example.mp4\" type=video\/mp4 \/><source src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/10_example.ogv\" type=video\/OGV \/><\/video>\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images and videos can be resized the same way that background images can be resized. Videos can maintain their proportion in what is a boon for responsive design. The object-fit and object-position properties define how an element responds to the &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/10-responsive-images-and-video\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4243"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=4243"}],"version-history":[{"count":15,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4243\/revisions"}],"predecessor-version":[{"id":4285,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4243\/revisions\/4285"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=4243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=4243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=4243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}