- This topic is empty.
-
AuthorPosts
-
October 26, 2016 at 1:17 pm #247081akenixxParticipant
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
October 26, 2016 at 1:33 pm #247082ShikkedielParticipantIf 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.
October 26, 2016 at 1:48 pm #247083akenixxParticipantthanks 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
October 26, 2016 at 1:56 pm #247084akenixxParticipanthahaha!
i made a real beginner mistake!
forgot to link the html with my css!!!
feeling retarded right now!
~Akenixx
October 26, 2016 at 2:09 pm #247085ShikkedielParticipanti 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>
October 26, 2016 at 2:28 pm #247086ShikkedielParticipantHmm… 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.October 26, 2016 at 3:13 pm #247088akenixxParticipanthaha thanks! thats what i needed ;)
tried to mark it as a good answer but for some reason my browser denies that.
~Akenixx
October 26, 2016 at 3:16 pm #247089ShikkedielParticipantNo 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…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.