How to make sure all image size width and height are the same html css • bonstutorial

in this post, I will tell how to make all image size, the width and height are the same.we will use CSS property max–width,max-height,min-width,min-height hence what will happen the image can not exist the max-height and can be below than min-height, similarly, it is same for the width. for that add following in your style

 img{
         max-width: 150px;
         min-width: 150px;
         max-height:200px;
         min-height: 200px;
    }

img{

max-width: 150px;

min-width: 150px;

max-height:200px;

min-height: 200px;

}

for example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Image Lists</title>
  <meta name="csrf_token" content="{{csrf_token()}}">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style type="text/css">
   
  
    img{
         max-width: 150px;
         min-width: 150px;
         max-height:200px;
         min-height: 200px;
    }
  </style>
  
</head>
<body>

<img src="" class="img-thumbnail" width="200px" height="200px" alt="Cinque Terre">
 
</body>
</html>

<!DOCTYPE html>

<head>

<title>Image Lists</title>

img{

max-width: 150px;

min-width: 150px;

max-height:200px;

min-height: 200px;

}

</style>

</head>

<body>

</body>

</html>

Share with: