Help for images

Help for images
0

#1

Hello, now i’m creating the personal portfolio project and i want to make it for my photography portfolio. As you can see in my codepen here: https://codepen.io/andras75/full/JRjOjJ/ ; the first image is not the same size as others, im wondering what cause that, because i used the img-responsive on all of them and they have the same code. the first image code starts on line 34.

Thanks!


#2

I am not a Bootstrap expert but what I saw is that the img-responsive makes the image scales relative to its parent, so when you check the parents height you can see that there are different values. I think you should try to give all the divs a fixed height, otherewise they will take the value fo the img.


#3

Ooh okay then i will try that, thanks !


#4

My personal opinion: I don’t really like using img-responsive, I think you could miss a lot of thing you should make custom to your needs, like the max-height of the images, I’d recommend you to add that max-height property to your images, that should fix the problem. You could also change the images so each one of them has the same resolution.
I think it’s being caused by the image resolution, it’s not the same as the others, so the img-responsive class “fixes” the height to fit the weigth at its max without distorting it.
My english can be kinda messy, sorry, not my native language :smile:


#5

yeah i guess that’s maybe the case, i have a different resolution images and img-responsive has height:auto; so, i have to apply the same height to all my images. Thanks for your reply! It’s okay, english is not my native language too lol :smile:


#6

HI Andrasat

I look at your code and there i see the div class cols:

div class='col-lg-4 col-md-4 col-sm-6’
4+4+6 = 14 it should be 12. Try it with 4+4+4 or 3+3+6
Bootstrap is based on a 12 column layout, so be careful.

Look here (i folked and changed your pen, lets see
with changes

Regards
Phajava


#7

well i thought that is used for different screen size, so in large screen size, col-lg-* run, in medium screen size col-md-* , and in small screen size, col-sm-* , but thanks anyway :slight_smile:


#8

@Andrasat
Of course you could/should use different cols for different sizes but it must be 12 at the end not 14.
Did you see the new pen? Works it now for you?


#9

well yea i know what you mean. when you try to make the page view smaller in the editor view, you can see that the images are lined up in 3 column, and i want to make it just 2 column. thats why in the last code i used col-sm-6.

I think the codes col-lg-4,col-md-4,col-sm-6 are not rendered the same time, they are rendered depending on the screen size you use, like laptop/desktop screen(large and medium), tablets(small), when i use tablets to watch my webpage, only the col-sm-6 works, the other code are just there doing nothing. Then when i use laptop, only the col-lg-4 or col-md-4 works.

My problem was my images had a different resolution size, so they are not aligned well. I guess i just have to upload the same resolution images so they can aligned well and have the same sizes.

Thanks for your reply!