Make an Image Responsive in CSS
Make an Image Responsive in CSS. In this Article we will look into how to make our Image responsive.
Google , take Responsive Website into account seriously in terms of SEO.
Responsive Image will increase user experience . This will enhance our site usability, when the User access our site using different type of devices.
In Order to make our image Responsive, there are a few step that we need to do below.
- Adjust Maximum width and height in CSS
- Set your Height to Auto
- Add some padding to your image (Optional)
The Commands involve to make this happens are:
- max-width
- height
- padding
Refer the Code Below
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GETTING STARTED WITH BRACKETS</title>
<meta name="description" content="Just another Website.">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Arvo|Indie+Flower|Ranchers" rel="stylesheet">
</head>
<body>
<div class="container">
<img src="images.jpg " class="borderImage">
</div>
</body>
</html>
CSS
img{
max-width: 100%;
height:auto;
padding:5px;
}
.borderImage{
border-radius: 10px;
width: 300px;
height: 300px;
border : 3px solid #ddde;
padding : 20 ;
}
Check out why is responsive Images are so important over here
Check out how to create image thumbnail using CSS here
Leave a Reply