change div size based on image orientation

Question

I have been making a web landing page for my app, but it keeps squishing the landscape image and thinking its portrait. I want the div to auto adjust for the picture so if the height is greater than the width then the div should adjust to the image's size. How could I go about doing that.

Sample of the Code I am using to display the images:

<div id="favphoto">            
    <a href="/event/%event%/photo/%id%.jpg" target="_blank">
        <img border="0" src="/event/%event%/photo/%id%.jpg" />
    </a>
</div>

I want to make the div auto size to the correct image that gets called, if not am I just going about this wrong.

I'm not to sure to understand but you have css for min-width, min-height or set the width/height to auto. Maybe this can help. — the_lotus
Do you have any sample code of what you are trying, if so please post it, it will assist in providing a better solution than just a generic and open ended question. — tremor
A DIV by default will stretch all the way across the screen. You must have some CSS or some parent container that's causing this. — Code Maverick

Paulie_D Paulie_D · Accepted Answer · 2013-10-04T21:53:26

Setting the div to display:inline-block will cause it to be only as wide as the contents.

JSFiddle Example

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/400/200/sports/" />
    </a>
</div>

<div class="favphoto">            
    <a href="#" target="_blank">
        <img border="0" src="http://lorempixel.com/200/400/sports/" />
    </a>
</div>

.favphoto {
    display:inline-block;
    vertical-align:top;
}

.img {
    display:block;

}

change div size based on image orientation

1 Answers