{"id":3136,"date":"2024-02-15T13:51:43","date_gmt":"2024-02-15T18:51:43","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/?p=3136"},"modified":"2024-02-15T13:57:50","modified_gmt":"2024-02-15T18:57:50","slug":"responsive-images-and-video","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/responsive-images-and-video\/","title":{"rendered":"Responsive Images and Video"},"content":{"rendered":"\n

Images are by default inline elements that are a certain size and will take up that space on your web site.<\/p>\n\n\n\n

For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example:<\/p>\n\n\n\n

The following needs to be in place for that to happen:<\/p>\n\n\n\n

    \n
  1. The image must be inside a container.<\/li>\n\n\n\n
  2. CSS is applied to the container to give it a responsive width (ie it\u2019s part of a CSS grid with an fr unit, or the container has a % width)<\/li>\n\n\n\n
  3. CSS is applied to the image to allow it to change size to shrink if needed.<\/li>\n<\/ol>\n\n\n\n

    1: Put the Image inside a container<\/h4>\n\n\n\n

    This is relatively simple. Just remember to use a block element like div, section, paragraph, figure. Also it should have a class applied to the container (not required but easier to style later).<\/p>\n\n\n\n

    <div class="imageContainer">\n   <img src="images\/myimage.jpeg" alt="image of something cool">\n<\/div>\n\n<figure class="imageContainer">\n    <img src="images\/myimage.jpeg" alt="image of something cool">\n  <figcaption>Image of something cool by Awesome Person<\/figcaption>\n<\/figure><\/pre><\/div>\n\n\n\n
    2: Apply Responsive Width to the Container<\/h4>\n\n\n\n
    This one is hard to show an example. It depends on how you\u2019re doing the layout for your page. If you\u2019re using CSS grid then just make sure you use responsive units, like fr, for the widths of your columns.<\/p>\n\n\n\n
    Here\u2019s an example three column grid with fr widths for the columns.<\/p>\n\n\n\n
    .container{\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    grid-gap: 1rem;\n}<\/pre><\/div>\n\n\n\n
    3: Apply CSS to the Image to Allow it to Change Size<\/h4>\n\n\n\n
    Notice we did not say anything about growing. Generally, you DO NOT<\/strong> want the image to grow to fill its container. It could become pixellated and not look good. At first, we will load in images that are large enough to fill the space we need. Another post will show a more advanced responsive method that can load different sized images.<\/p>\n\n\n\n
    \/* Basic Responsive Images and Video *\/\nimg,video{\n  width: auto; \n  height: auto;\n  max-width: 100%; \n}\n<\/pre><\/div>\n\n\n\n
    Setting the width and height to auto allows it to change size. Setting the max-width to 100% means it won\u2019t grow larger than its original size.<\/p>\n\n\n\n
    You can also just copy the CSS from my Base Responsive CSS<\/a> file which has this style and the responsive video embed styles that I show below.<\/p>\n\n\n\n
    Here is an example of an image inside a container that is smaller than the image where no CSS has bee applied to the image:<\/p>\n\n\n\n
    \"700<\/figure>\n\n\n\n
    And here is the same image with the CSS applied. The width of the image has changed so that it stays inside of the containing element.<\/p>\n\n\n\n
    \"700<\/figure>\n\n\n\n
    To see this in action view this CodePen Example<\/a>.<\/p>\n\n\n\n
    RESPONSIVE VIDEO<\/h2>\n\n\n\n
    This is away to embed a video element that will resize responsively with your page. Actually, it allows you to put whatever you want in a box with a specific aspect ratio, but the most common use is for video which is either a 4:3 or 16:9 aspect ratio.<\/p>\n\n\n\n
    For this to work you need to add in HTML and CSS to your project.<\/p>\n\n\n\n
    HTML to Add<\/h3>\n\n\n\n