for the love of christ i need some one to help me here, have been battling with this image size called portrait . i dont have problem with landscape but portrait is the wahala. i want to correct this issue using css or if you know any other viable mehtod please share . i have attached an image to let you know what am trying to say. i want that girls pics to align with that man

cc : onyengbu

cbrass:
for the love of christ i need some one to help me here, have been battling with this image size called portrait . i dont have problem with landscape but portrait is the wahala. i want to correct this issue using css or if you know any other viable mehtod please share . i have attached an image to let you know what am trying to say. i want that girls pics to align with that man

cc : onyengbu

Do the two pictures have different resolutions?

Fulaman198:


Do the two pictures have different resolutions?

If you look closely you will discover that those two are friends for that user. So the first user had a landscape size of profile pics while the other had a landscape type since it will be had to know which type of image users will upload

cbrass:


If you look closely you will discover that those two are friends for that user. So the first user had a landscape size of profile pics while the other had a landscape type since it will be had to know which type of image users will upload

Regardless of image orientation Landscape and Portrait, you could scale the images to be of similar resolution in the your code right?

Fulaman198:


Regardless of image orientation Landscape and Portrait, you could scale the images to be of similar resolution in the your code right?

Well what I know how to do in PHP is resize the image giving it equal width and height

cbrass:


Well what I know how to do in PHP is resize the image giving it equal width and height

It can also be done in CSS and HTML using width and height variables. That's really the only way to fix the problem unless if one of the fellows friends wants to retake the picture in portrait instead of landscape.

cbrass:


Well what I know how to do in PHP is resize the image giving it equal width and height

See what I would do.

I will return all images under that friend zone inside a div class named something like .pimg.

so the html will look like:

<div class="pimg"><img src="guy.jpg"/></div>
<div class="pimg"><img src="girl.jpg"/></div> 
 

then my css will look something like:

.pimg{
height:120px; 
width:140px;
overflow:hidden;
float:left;
}
.pimg img{
width:100%;
}

This will make sure the images are all the same height though that of the girl for example will be 'cut' off after 120px. You wont get all the details in most pictures but at least your pictures will be aligned properly.

I love my Nigerian brothers and sisters Walahi. We have so many great programmers. We are the future ladies and gentlemen of this country Nigeria. We will bring it far with great programming.

This would probably help all the similar problems I do have

onyengbu:

See what I would do.

I will return all images under that friend zone inside a div class named something like .pimg.

so the html will look like:

<div class="pimg"><img src="guy.jpg"/></div>
<div class="pimg"><img src="girl.jpg"/></div> 
 

then my css will look something like:

.pimg{
height:120px; 
width:140px;
overflow:hidden;
float:left;
}
.pimg img{
width:100%;
}

This will make sure the images are all the same height though that of the girl for example will be 'cut' off after 120px. You wont get all the details in most pictures but at least your pictures will be aligned properly.

Fulaman198:


It can also be done in CSS and HTML using width and height variables. That's really the only way to fix the problem unless if one of the fellows friends wants to retake the picture in portrait instead of landscape.

Thanks alot bro I really appreciate your help will do that now

onyengbu:

See what I would do.

I will return all images under that friend zone inside a div class named something like .pimg.

so the html will look like:

<div class="pimg"><img src="guy.jpg"/></div>
<div class="pimg"><img src="girl.jpg"/></div> 
 

then my css will look something like:

.pimg{
height:120px; 
width:140px;
overflow:hidden;
float:left;
}
.pimg img{
width:100%;
}

This will make sure the images are all the same height though that of the girl for example will be 'cut' off after 120px. You wont get all the details in most pictures but at least your pictures will be aligned properly.

What can I do without you bro, I pray God gives me the grace to compensate you this December coming I really appreciate your effort

cbrass:


What can I do without you bro, I pray God gives me the grace to compensate you this December coming I really appreciate your effort

I am honoured.

onyengbu:

I am honoured.

this is how it looks now, will have to manage it like that for the moment

cbrass:


Thanks alot bro I really appreciate your help will do that now

Excellent, and no problem.

cbrass:


this is how it looks now, will have to manage it like that for the moment

You did set height for the image and thats why its squished.

If you set the height property, the image will be forced to fit into the box and that wont look good. You either set height or width not both.
Meanwhile pad the .pimg a bit (like 5px) so that the pictures wont be touching each other.

My CSS said:
.pimg img{
width:100%;
}

onyengbu:


You did set height for the image and thats why its squished.

If you set the height property, the image will be forced to fit into the box and that wont look good. You either set height or width not both.
Meanwhile pad the .pimg a bit (like 5px) so that the pictures wont be touching each other.

My CSS said:
.pimg img{
width:100%;
}

No I didn't add height ,i would have padded it but i think it looks cool like that to me

sometimes different size doesn't look well on the website space. In this case I would resize and modify the Girl image to the same size and orientation (landscape) as the Man image. Really it's even better to have the same size and characteristics on both images, looks more professional