- This topic is empty.
-
AuthorPosts
-
October 27, 2016 at 11:38 pm #247134AyalaParticipant
Hi,
My problem is this:
http://codepen.io/Ayalann/pen/ZpNaJbThe image isn’t in the div.
This is a possible solution:
http://codepen.io/Ayalann/pen/kkdxwWThis html is a little complicated.
Or I can do it with clearfix and float.
What is the recommended solution for this?
October 28, 2016 at 1:16 am #247136Paulie_DMemberIt depends on what you are trying to do.
It’s not clear what the actual problem is. What does “properly” mean?
October 28, 2016 at 1:23 am #247137AyalaParticipantWhich is the best solution if I want a flexible arrangement (I have different size of images for example) and I want to make it responsive, as well.
I don’t know the disadvantages of these solutions, if there any.October 28, 2016 at 2:42 am #247138Paulie_DMemberUnfortunately, that’s way to broad.
First you asked..
What is the recommended solution to put an image into a div properly?
then…
Which is the best solution if I want a flexible arrangement (I have different size of images for example) and I want to make it responsive, as well.
I’m still not clear on what look you are going for. If you have an image of what it is you are trying to achieve it would be useful.
October 28, 2016 at 3:02 am #247140AyalaParticipantI do not really know these technics.
I can do the same thing with two different way. But I don’t know the advantages and the disadvantages. Maybe “this way is okay but if I would have more pictures this won’t work, because…” (I have no idea.)
Or maybe one of this solution isn’t supported everywhere.So I don’t know how I choose.
But maybe both of them is good, and there aren’t more solution of this problem.
October 28, 2016 at 4:00 am #247141SenffParticipantLike Paulie said, it depends on what you’re trying to do. You’re showing two examples in your initial post, and both are correct — it’s not like one is better than the other.
Sometimes you want the first one, other times you want the second one. It’s all about in which context they are.
Here are two examples (somewhat the same as yours; one image escaping the div, the other one having the div wrapped around it), but placed within context; whichever you prefer, depends on your design.
http://codepen.io/senff/pen/KgLRXa
http://codepen.io/senff/pen/qaGYPr
What I don’t recommend though, is using position:absolute or display:table, like you have in your examples; that’s not really necessary in cases like these.
October 28, 2016 at 4:39 am #247142AyalaParticipantI mean, my problem is that the image goes over the div. I want that the size of the div would be like the image.
Your second example is the aim. (This is the 3. solution.)
Solutions:
1.: with table
2.: with float and clearfix
3.: with float and overflowThe last one is the most understandable for me, and the easiest. Thank you for this!
Maybe my question was wrong, because it really depend of the case.
Thank you for your all answers!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.