Html Default Image Size

I'm displaying 3 pictures on my code. The pictures have different size (width and height).

Copy

Or use some CSS by setting the width and height rules and linking it to the images you want to affect:

#myImage {

  width: 100px;
  height: 100px;

}

<divclass="row"><divclass="col-lg-12"><h2class="page-header">Gallery</h2></div><divclass="col-md-4 col-sm-6"><a><imgid="myImage"class="img-responsive img-portfolio img-hover"src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"alt=""></a></div><divclass="col-md-4 col-sm-6"><a><imgid="myImage"class="img-responsive img-portfolio img-hover"src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"alt=""></a></div><divclass="col-md-4 col-sm-6"><a><imgid="myImage"class="img-responsive img-portfolio img-hover"src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"alt=""></a></div></div>

---

Another thing : in the above code, if the images you're using are not squares you might want to use width: auto or height: auto. Look below:

/* sets the width to 100px and the height will be calculate automatically to respect the dimensions */#myImage1 {

  width: 100px;
  height: auto;

}


/* sets the height to 100px and the width will be calculate automatically to respect the dimensions */#myImage2 {

  width: auto;
  height: 100px;

}

<divclass="row"><divclass="col-lg-12"><h2class="page-header">Gallery</h2></div><divclass="col-md-4 col-sm-6"><a><imgid="myImage1"class="img-responsive img-portfolio img-hover"src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"alt=""></a></div><divclass="col-md-4 col-sm-6"><a><imgid="myImage2"class="img-responsive img-portfolio img-hover"src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg"alt=""></a></div></div>

Solution 2:

You can use the CSS max-width property. This will limit the width of the images. If you set the limit less than or equal to the true width of the smallest image, they will all scale down to match that value. Note that you might need to also deal with vertical scaling in some browsers, but it is handled automatically in others.

Solution 3:

Use height and width properties as:

<img class="img-responsive img-portfolio img-hover" 
 src="../../imgVideos/test/1/pictureGallery3.jpg" width="200px" height="200px" 
 alt="">