Create Responsive images in HTML,PHP using Bootstrap CSS classes

How to make fully responsive images that can adapt any screen resolution size to adjust image to fit all type of screens.

Responsive images are one of the most leading way to make your website user happy because when your website images is fully responsive then it can automatically adapt all the requested screen resolution automatically and adjust the image according to the screen size, So no matter on which platform your website will open it will automatically set according to device screen size and gives the perfect awesome view to its users. So in this tutorial we are using Bootstrap’s .img-responsive class which will make our any given image inside img src tag to full responsive. So here is the complete step by step tutorial for Create Responsive images in HTML,PHP using Bootstrap CSS classes.

How to Create Responsive images in HTML,PHP using Bootstrap CSS classes.

https://www.android-examples.com/demo/heading-tag.html
Code for responsive-media.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive images</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Responsive images</h1>

<img src="https://www.android-examples.com/wp-content/uploads/2016/01/sample_round-image.png" class="img-responsive" alt="Responsive images" width="300" height="300">
 
</div>
</body>
</html>

Screenshot:

Create Responsive images in HTML,PHP using Bootstrap CSS classes

Leave a Reply

Your email address will not be published. Required fields are marked *