CODEWITHSUNDEEP
cssresponsive-designimageinheritance
mpleandro
mpleandro

Reputation: 37

Div fit according image width

I have a portfolio page with a image display with zoom. I have this code: http://codepen.io/Mpleandro/pen/LvrqJ

The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.

The image width will be flexible, so I what I want is to make the containing div inherit the width of image.

I tried the css property auto, inherit and min-with, but nothing works!

Could someone help me?

P.S.: I need a responsive solution.

Thanks

Upvotes: 2

Views: 5844

Answers (4)

S.B.
S.B.

Reputation: 2969

The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.

Put together, it would look like this: http://codepen.io/anon/pen/IluBt

JS line 17:

$(".display").css("display","inline-block");

CSS for .display

.display {
    position: relative;;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    max-height:80%; /* <-- limit the height */
    top:10%;
    left:0;
    margin:auto;
}

And to align everything nicely:

.loader {
    color: red;
    position: fixed;
    width: 100%; height: 100%;
    background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
    text-align: center;
}

Upvotes: 0

knitevision
knitevision

Reputation: 3143

since 1 year has passed you may not be interested in the solution, but hope that helps someone else.

I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.

In my case, I set a fixed width for the div

.some-div{
   width: 250px;
}

I also had responsive image:

img{
   display: block;
   max-width: 100%;
   height; auto;
}

and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:

@media screen and (max-width: 917px){
    .some-div{
        width: 100%;
    }
}

For my project the threshold was 917px when the fixed width started to affect.

I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.

Upvotes: 7

Vincent Reuling
Vincent Reuling

Reputation: 9

I'm not sure if this is what you mean, but if it is, I hope it will help!

If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.

Upvotes: 0

snooze92
snooze92

Reputation: 4238

I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.

auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.

Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.

My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.

Upvotes: 0

Related Questions