beginner need help with resize IMG in css.

[akenixx]

heya guys!,

new to CSS-tricks! hope i got a very learnfull time with you guys!

i’m trying to learn myself CSS with Bootstrap within it but i got stuck with resizing my images. i’ve already tried to give the images an specific height and width but it didnt helped. can anyone explain me what to do and what i’ve done wrong?!

here is my CodePen link: http://codepen.io/Akenixx/pen/GjLxrw

cheers,

Akenixx

[Shikkediel]

If I understand correctly, just don’t give the images a specific height. They should then adapt to the given width and keep their aspect ratio. If there’s trouble somehow anyway, try using height: auto instead.

Please explain the issue a bit further if that is not what you had in mind.

[akenixx]

@shikkediel

thanks for your response! :)

its kinda what i mean indeed but let me try to explain the issue a bit more!

indeed, i want to make the images the same size so that the images will be next to each other but at the moment i got 4 images and they’re all beneath each other.

i hope you can undestand what i mean because i dont know how to explain it exactly

[akenixx]

hahaha!

i made a real beginner mistake!

forgot to link the html with my css!!!

feeling retarded right now!

~Akenixx

[Shikkediel]

i want to make the images the same size so that the images will be next to each other

Okay, that would mostly depend on the tree structure and column widths you create with Bootstrap. I’m not familiar with their interface. It’s CSS isn’t kicking in with the example for some reason by the way, better to click the small cog left from “CSS” above the code window and quick select it there.

All I can really say at the moment is that if you put the images together in the same parent element (with a col-md-12 class so it gets full screen width) and give all the images a width of 25%, they should fill up the screen. It’s the wrapping element that’s make them end up beneath each other, images placed one after one the other will stay on the same line as long as the space allows it.

Maybe someone that knows Bootstrap better can provide more clues.

Edit:

25%

Or 50% because it looks like you’d like to have two rows with each two images… I’d take out the second nested row and leave them within the same parent element. Then this:

<div class="col-md-12">
  <img class="overwatch" src="img/overwatch.jpg">
  <div class="row">
    <div class="col-md-12">
      <img class="sum41" src="img/sum41.jpg">
    </div>
  </div>
</div>

Would become this:

<div class="col-md-12">
  <img class="overwatch" src="img/overwatch.jpg">
  <img class="sum41" src="img/sum41.jpg">
</div>

[Shikkediel]

Hmm… not working. Let me have another look.

Okay, that’s because another parent has a col-md-3 class which makes the whole thing small. I’ll post an example later on.

Something like this

[akenixx]

haha thanks! thats what i needed ;)

tried to mark it as a good answer but for some reason my browser denies that.

~Akenixx

[Shikkediel]

No problem, as long as it helps. :-)

I noticed… something like below is unlikely to work correctly – when the parent is only half the screen size (col-md-6), the child could never be full width (col-md-12). Again, I’m a Bootstrap rookie.< /del>

<div class="col-md-6">
  <div class="row">
    <div class="col-md-12">

    </div>
  </div>
</div>

Edit – I think I was babbling nonsense there…

[Author]

Posts