CODEWITHSUNDEEP
cssimagealignment
SebSky
SebSky

Reputation: 171

Image alignment within div using CSS

I have a following problem.

I have a row of 290px x 160px squares which suppose to display images withing a div.

<div class="33percentWidth">
<img src="./img1" class="???" />
</div>

<div class="33percentWidth">
<img src="./img2" class="???" />
</div>

<div class="33percentWidth">
<img src="./img3" class="???" />
</div>

Problem is that if the image is bigger (more than 290px x 190px; this enlarges height or width.

Question: How can I define my img class so the images will be centered (and scaled) to fit 290x190 square, and to me sure that with of a "column" will persist?

Upvotes: 1

Views: 58

Answers (4)

Jon P
Jon P

Reputation: 19772

Size the div and max-width the img

.percentWidth {
  display: inline-block;
  width: 260px;
  height: 190px;
  line-height: 190px;
  border: solid 1px black;
  vertical-align: top;
  text-align: center;
  position: relative;
}
.percentWidth>img {
  max-width: 260px;
  max-height: 190px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<div class="percentWidth">
  <img src="http://placehold.it/260x190&text=same" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/200x100&text=smaller" />
</div>

<div class="percentWidth">
  <img src="http://placehold.it/280x200&text=bigger" />
</div>

Upvotes: 0

Sonny Prince
Sonny Prince

Reputation: 1

I think it's best to let the image sort it's own aspect ratio within the div..

So for sizing I would:

.class { max-width: 100%; height: auto}

And to center an image you can use either:

.parent { text-align: center}

Or 

Img {display: block; margin: 0 auto;}

But the last method is only useful is the img is smaller than the parent

Upvotes: 0

Shyam Ranpara
Shyam Ranpara

Reputation: 624

If you give width to img tag then it will automatically fit to your column.

<style>
 .imgclass{
 height:160px;
 width:290px; 
 }
 .divclass{
  text-align:center; 
 }
 </style>
 <div class="divclass">
  <img src="./img1" class="imgclass" />
 </div>

Upvotes: 0

Ataboy Josef
Ataboy Josef

Reputation: 2101

You can use CSS

.classname{
  max-width :290px;
  max-height:190px;
  align-content: center;
}

Upvotes: 0

Related Questions