HTML default image size - html

Question

I'm displaying 3 pictures on my code. The pictures have different size (width and height).
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Gallery</h2>
</div>
<div class="col-md-4 col-sm-6">
<a >
<img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery1.jpg" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a >
<img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery2.jpg" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a >
<img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery3.jpg" alt="">
</a>
</div>
</div>
It loads and displays the pictures, but the sizes of the images are different. How can I set the height and width to have a default value?
Thanks

Answer 1

Use the height and width attributes on the image tag:
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Gallery</h2>
</div>
<div class="col-md-4 col-sm-6">
<a>
<img height="100" width="100" 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 class="col-md-4 col-sm-6">
<a>
<img height="100" width="100" 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 class="col-md-4 col-sm-6">
<a>
<img height="100" width="100" 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>
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;
}
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Gallery</h2>
</div>
<div class="col-md-4 col-sm-6">
<a>
<img id="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 class="col-md-4 col-sm-6">
<a>
<img id="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 class="col-md-4 col-sm-6">
<a>
<img id="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;
}
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Gallery</h2>
</div>
<div class="col-md-4 col-sm-6">
<a>
<img id="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>
<div class="col-md-4 col-sm-6">
<a>
<img id="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>

Answer 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.

Answer 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="">