CODEWITHSUNDEEP
cssimagesizegallery
Blokhin Sergey
Blokhin Sergey

Reputation: 1

Image gallery in html. How to make images appear the same size?

How to make images from image gallery appear same size? (if originally they have different dimensions).

jsfiddle.net

Add a description of the image here 
<div class="img">
<a target="_blank" href="https://unsplash.it/g/300/400">
  <img src="https://unsplash.it/g/200/300" alt="Forest" width="600"  height="400">
</a>
  <div class="desc">Add a description of the image here</div>
 </div>
    <div class="img">
   <a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600"height="400">
</a>
<div class="desc">Add a description of the image here</div>
 </div>

  <div class="img">
<a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
 </div>
 <div class="img">
<a target="_blank" href="https://unsplash.it/g/400/400">
  <img src="https://unsplash.it/g/400/400" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>

Upvotes: 0

Views: 1077

Answers (2)

jack
jack

Reputation: 2914

That depends on how you want to adjust the ones that aren't the same size. In other words, if you have a 300x200 image and a 300x300 image, you could:

  • stretch the 300x200 one out to 300x300, which would make it look distorted
  • scale the 300x200 one up so it's large enough to fill a 300x300 box, then crop out or hide the excess
  • keep the 300x200 one at its normal size but put it in a 300x300 box with some whitespace above and below it
  • crop the top and bottom of the 300x300 one so it's also 300x200

These are all options you have and they'd all be implemented a little differently, so first figure out which way you want to go.

Upvotes: 0

Sumit patel
Sumit patel

Reputation: 3903

Update Css Add img Class In Css. And Remove height :auto in div.img img Class

Note: You Can Change Hight & width in Css

img
{
  width:300px;
  height:200px;
}
div.img img
{
 width: 100%;
}

See Live Demo Here

Snippet Example Below

div.img {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.img:hover {
  border: 1px solid #777;
}

div.img img {
  width: 100%;
}

div.desc {
  padding: 15px;
  text-align: center;
}
img
{
  width:300px;
  height:200px;
}
<!DOCTYPE html>

<body>

  <div class="img">
    <a target="_blank" href="https://unsplash.it/200/300/?random">
      <img src="https://unsplash.it/200/300/?random" alt="Trolltunga Norway" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/300/400">
      <img src="https://unsplash.it/g/200/300" alt="Forest" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/400/400">
      <img src="https://unsplash.it/g/400/400" alt="Northern Lights" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
  
  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/400/400">
      <img src="https://unsplash.it/g/400/400" alt="Northern Lights" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/400/400">
      <img src="https://unsplash.it/g/400/400" alt="Northern Lights" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/400/400">
      <img src="https://unsplash.it/g/400/400" alt="Northern Lights" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
  <div class="img">
    <a target="_blank" href="https://unsplash.it/g/400/400">
      <img src="https://unsplash.it/g/400/400" alt="Northern Lights" >
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

Upvotes: 1

Related Questions