Limiting size of responsive images

Limiting size of responsive images
0

#1

Okay, I have a row of icons on my about page and they look good up to a point but then they get super huge. I tried setting max height and width, but then they lost some of their responsiveness (like centering and stacking properly at wider viewports. I’ve been googling all around trying to figure this out and reviewing the bootstrap docs to see if there is a way to do it but so far I’ve come up with a 19 hand. I’m sure there has got to be a way to do it. Any help would be appreciated.
https://preview.c9users.io/chadkreutzer/portfolio/index.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io

also, any other feedback that people might notice would be appreciated.


#2

Is there any way you could post the code?


#3

I figured this out a while back. Use:

width: 100%;
max-width: Xpx;

X can be whatever number you’d like. Just experiment with that number until you get the desired look.


#4

Thanks, but that didn’t do it. that ended up the same as when I tried setting the max-width alone: it lost the rest of the responsiveness, like centering and shrinking smaller than the max size.


#5

here’s the repository: https://github.com/ChadKreutzer/portfolio


#6

I was able to get the desired behavior with

@media screen and (min-width: 1200px) {
    #skills img {
        max-height: 241px;
        max-width: 237px;
    }
    div#skills.content.col-xs-10.col-sm-2.col-xs-offset-1.col-sm-offset-1 {
        max-width: 237px;
    }
}

You may want to play with the numbers a bit as I didn’t do extensive testing.


#7

I was sure that would work… You can try putting the icons inside an unordered list and then put a max-width on the li and a width 100% on the actual image.