{"id":1343,"date":"2025-05-11T12:00:00","date_gmt":"2025-05-11T16:00:00","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/?p=1343"},"modified":"2025-05-12T00:17:07","modified_gmt":"2025-05-12T04:17:07","slug":"css-for-images-and-video","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/web-design-module\/css-for-images-and-video\/","title":{"rendered":"CSS for Images and Video"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Basic Responsive Image and Video<\/h3>\n\n\n\n<p>The following CSS will allow <strong>img<\/strong> and <strong>video<\/strong> elements to resize down (not bigger) if they are bigger than their container. Copy and paste below into your CSS (near the top of the page).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img,video{\n    max-width: 100%; \n    height: auto;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">More detailed explanation<\/h4>\n\n\n\n<p>Everyone should add the CSS above to their stylesheet for their site. However there is more information that is helpful to know when implementing this in a project.<\/p>\n\n\n\n<p>The problem: images naturally display at 100% of their size. For big images or small screens this means you won&#8217;t be able to see all of the image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"419\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM-1024x419.png\" alt=\"screenshot showing image going outside of its containing element (past the width of the container).\" class=\"wp-image-1345\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM-1024x419.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM-300x123.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM-768x314.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM-1536x629.png 1536w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.53.23\u202fAM.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> Once we add in the CSS given at the top of this post, the image will stay inside of the container. Setting a max-width to 100% is what tells the image not to be wider than its containing element. See example below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1902-fa23\/wp-content\/uploads\/sites\/3272\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM-1024x443.png\" alt=\"screenshot showing image staying inside of its containing element (fit the width of the container).\" class=\"wp-image-1346\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM-1024x443.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM-300x130.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM-768x332.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM-1536x665.png 1536w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-content\/uploads\/sites\/4101\/2023\/12\/Screenshot-2023-12-11-at-11.56.27\u202fAM.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Remember that this will also work for <strong>video <\/strong>elements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Basic Responsive Image and Video The following CSS will allow img and video elements to resize down (not bigger) if they are bigger than their container. Copy and paste below into your CSS (near the top of the page). More detailed explanation Everyone should add the CSS above to their stylesheet for their site. However [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[25,27,23],"tags":[48,50],"class_list":["post-1343","post","type-post","status-publish","format-standard","hentry","category-final-project","category-how-to","category-web-design-module","tag-css","tag-image"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>Basic Responsive Image and Video The following CSS will allow img and video elements to resize down (not bigger) if they are bigger than their container. Copy and paste below into your CSS (near the top of the page). img,video{ max-width: 100%; height: auto; } More detailed explanation Everyone should add the CSS above to their stylesheet for their site. However there is more information that is helpful to know when implementing this in a project. The problem: images naturally display at 100% of their size. For big images or small screens this means you won&#8217;t be able to see&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/category\/final-project\/\" rel=\"category tag\">Final Project<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/category\/resources\/how-to\/\" rel=\"category tag\">How-To<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/category\/web-design-module\/\" rel=\"category tag\">Web Design Module<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"Basic Responsive Image and Video The following CSS will allow img and video elements to resize down (not bigger) if they are bigger than their container. Copy and paste below into your CSS (near the top of the page). More detailed explanation Everyone should add the CSS above to their stylesheet for their site. However&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/posts\/1343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/comments?post=1343"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/posts\/1343\/revisions"}],"predecessor-version":[{"id":1347,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/posts\/1343\/revisions\/1347"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/media?parent=1343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/categories?post=1343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-stein-spring-25\/wp-json\/wp\/v2\/tags?post=1343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}