Related Topics
CSS
HTML
img, video {
max-width: 100%;
height: auto;
}
In this example, the max-width of the img and video elements is set to 100%, and the height is set to auto to maintain the aspect ratio.
3. Add a responsive breakpoint: If you want the image or video to adjust its size at a certain breakpoint, you can use a media query to set a different max-width value. For example:
@media screen and (min-width: 768px) {
img, video {
max-width: 50%;
}
}
In this example, the max-width of the img and video elements is set to 50% for screens wider than 768 pixels.
By using CSS to set the max-width property of images and videos to 100%, you can make them responsive and ensure that they scale down proportionally to the size of their container. This technique is a fundamental aspect of responsive design and helps to ensure that your website looks great on all devices.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.