CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Responsive Images and Videos

Responsive web design means that not only can our layouts change based on device characteristics, but content can change as well.


Responsive Images

A responsive image adjust itself to fit the size of the screen.

Use width:100% and height:auto to make an image responsive, the image will be scale up and down according to screen size:

Run code

Using max-width:100% the image will be scale down if it has to, but never scale up to be larger than its original size:

Run code

You can also make responsive background images.

The following example shows how to make responsive background image:

Run code

Responsive Videos

A responsive video adjust itself to fit the size of the screen.

Use width:100% and height:auto to make a video responsive, the video will be scale up and down according to screen size:

Run code

Using max-width:100% the video will be scale down if it has to, but never scale up to be larger than its original size:

Run code