0

I have a set of images of unknown height. The code for each looks like this:

Code:

<div class="x">
   <div class="a"><img src="foto.png" /></div>
   <div class="b"></div>
</div>

I tried using display: block for the image, and height: auto for class x. I don't know why, but I'm getting the expected behavior on Firefox but not Opera 19.

In Firefox I get normal squares with random-height images -- one under one, depending on image height. In Opera I only get flat rectangle(s) and all I can see is top of the image, with the rest of it truncated.

How do I need to do this such that it works on all browsers?

CSS 

.x
{
    min-height: 200px;
}
.a img
{
    display: block;
}
.b
{
    display: none;
}
  • not sure what do you want to achieve? a div with 100% height, and a picture in it, also with 100% height? – Marek Roj Feb 10 '14 at 22:19
  • all i want is to have height of div depending on height of an image. tried with display:block but failed. surprisingly it looks ok in firefox, dont know why opera doest apply to this. cant post images here to illustrate my problem –  Feb 10 '14 at 22:22
  • Can you also include the relevant css code, since that looks to be where the issue is. – badAdviceGuy Feb 10 '14 at 22:25
  • could you provide a jsfiddle with your current code? – Marek Roj Feb 10 '14 at 22:25
  • i edited my post, thats all i have for css. Works perfectly in Firefox. Height of box 'x' changes and it depends on image height. Only Opera cuts half of the image. I can see only top of it because I have paddings of 'x'... image: http://bildr.no/view/Nm8zSkZC –  Feb 10 '14 at 22:31

2 Answers2

0

Adding overflow: hidden; or a float to .x. AND .a, should fit the height of .x and .a to the height of the image, as long as you don't specify a height for .x or .a.

inorganik
  • 24,255
  • 17
  • 90
  • 114
  • it didnt help. It "looks like" (in Opera) that image isn't in 'a' div. When I added few lines of blabla
    in a div it stretched the div down and the image started to show up. It looks like the image isnt forcing its height to div. Trying with display but still no results in opera :(     –  Feb 10 '14 at 23:04
  • Are you testing by hosting it remotely? If so, you should clear your browser cache to make sure the browser is grabbing the newest css file. Ideally you should set up a local server and test locally. – inorganik Feb 10 '14 at 23:48
  • im testing it on my computer. the weird thing is that Firefox shows everything perfectly, even if i change display, float or any other property. it shows whole IMGs with various height, and that what i want. Dont know what happens to opera... –  Feb 10 '14 at 23:55
  • another funny fact, completely weird one: when i zoom out my site clicking '-' it all changes and looks OK, then when i go back to normal view its stays OK... goes back rubbish after refresh –  Feb 11 '14 at 00:26
0

The problem was with Masonry I use. Sorry that I didn't mention about it. Solution I've found so far: jquery masonry breaks(stacks images) in chrome/safari but only on first load

Community
  • 1
  • 1