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’t be able to see all of the image.
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.
Remember that this will also work for video elements.
