Hello,
I am trying to resize image with bootstrap. Can anyone help me explain this phenomena: https://getbootstrap.com/docs/4.0/content/images/ ?
I am trying to resize the image on cell phone into smaller one with the same proportion.
I thought this code will be successful:
chicken.php
<!DOCTYPE html> <html> <head> <title>ABL Home</title> <link href= "styles.css" rel="stylesheet" type="text/css" media="screen"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="custom.css"> </head> <center><img src="images/Logo.jpg"></center> <hr> <br> <?php include('nav.php'); ?> <center><img src="images/Slide_Chicken.jpg" class="img-fluid" alt="Responsive image"><br><br>The the code on the bottom. Why the image does not resize as I wish? It shows a horizontal scroll instead of resizing it.
This is strange.
Please help me out. Thanks in advance.