Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS What is the recommended solution to put an image into a div properly?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #247134
    Ayala
    Participant

    Hi,

    My problem is this:
    http://codepen.io/Ayalann/pen/ZpNaJb

    The image isn’t in the div.

    This is a possible solution:
    http://codepen.io/Ayalann/pen/kkdxwW

    This html is a little complicated.

    Or I can do it with clearfix and float.

    What is the recommended solution for this?

    #247136
    Paulie_D
    Member

    It depends on what you are trying to do.

    It’s not clear what the actual problem is. What does “properly” mean?

    #247137
    Ayala
    Participant

    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 don’t know the disadvantages of these solutions, if there any.

    #247138
    Paulie_D
    Member

    Unfortunately, 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.

    #247140
    Ayala
    Participant

    I 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.

    #247141
    Senff
    Participant

    Like 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.

    #247142
    Ayala
    Participant

    I 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 overflow

    The 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!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.