CODEWITHSUNDEEP
cssresizephoto
Lewis James
Lewis James

Reputation: 53

How do I make all images of similar size?

I'm making a gallery page on my site and want to use CSS to make all the images the same resolution when you scroll down the page, like a Vice photo article.

The HTML i'm using will look like 

<div class="photo">
<img src="album images/Test Album/img1.jpg">
<br>
<img src="album images/Test Album/img2.jpg">
</div>

What do I have to put in my .Photo { CSS in order to make all the images centered and the same size?

Cheers!

Upvotes: 2

Views: 30615

Answers (2)

Pizza lord
Pizza lord

Reputation: 763

if you want images with the same height

.photo img{
    height: 300px;
}

if you want the same width

.photo img{
    width: 300px;
}


.photo{
  text-align: centre;
  overflow: hidden;
  height: 300px;
}

.photo2{
  text-align: centre;
  overflow: hidden;
  max-width:300px;
}

.photo3{
  text-align: centre;
  overflow: hidden;
}

.photo img{
    height: 300px;
}

.photo2 img{
    width: 300px;
}

.photo3{
  overflow:hidden;
  width: 300px;
  height: 100px;
}

i hope this helps you
<!-- remove overflow: hidden; to see where the images actually are and do on the page -->

you see only 1 image because it take the whole height of the div element
<div class="photo">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>
<br>
you see both but they have been scaled too a width of 300px (height automatically scales here)
<div class="photo2">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>
<br>
you see part of a image because it is bigger then the div and the overflow is hidden
<div class="photo3">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>

Upvotes: 1

Stickers
Stickers

Reputation: 78676

Not sure if I understood the question correctly, but take a look of this as follows.

.photo {
    text-align: center; /*for centering images inside*/
}
.photo img {
    width: 300px; /*set the width or max-width*/
    height: auto; /*this makes sure to maintain the aspect ratio*/
}
<div class="photo">
    <img src="http://dummyimage.com/600x200"/>
    <br/>
    <img src="http://dummyimage.com/500x200"/>
</div>

Upvotes: 1

Related Questions