Definition:
CSS responsive images will automatically resize your images according to your device screen.
Syntax:
img {
max-width: 100%;
height: auto;
}Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
h2{
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sydney-Harbour-Bridge-View.jpg" alt="Sydney Harbour Bridge">
</body>
</html>
Output
Click “TRY IT YOURSELF” to see the results and make sure to resize the image to see the responsive image effects.
Donate to support writers.
You may be interested in the following topics:
- CSS Image Overlay Zoom
- CSS Image Overlay Icon
- CSS Image Overlay Title
- CSS Image Filters
- CSS Flip an Images
- CSS Image Hover Overlay Slide from the right
- CSS Image Hover Overlay Slide from the left
- CSS Image Hover Overlay Slide from the bottom
- CSS Image Hover Overlay Slide from the top
- CSS Image Hover Overlay Fade In A Box
- CSS Image Hover Overlay Fade In Text
- CSS Image Hover Overlay
- CSS Text Over an Image
- CSS Transparent Images
- CSS Center an Images
- CSS Card Images
- CSS Responsive Images
- CSS Thumbnail Images
- CSS Rounded Images
- CSS Images (All Properties)