CODEWITHSUNDEEP
htmlcss
user6824563
user6824563

Reputation: 815

HTML default image size

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

Upvotes: 2

Views: 20136

Answers (3)

Ivan
Ivan

Reputation: 40768

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>

Upvotes: 2

Anand Maurya
Anand Maurya

Reputation: 190

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

Upvotes: 0

TW80000
TW80000

Reputation: 1515

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.

Upvotes: 0

Related Questions