Hello.

We need a very complex structure of something like a tile product. Impose it turns out, but collapses in Firefox. I ask for advice. Thank!

The tile of the goods should be proportional: change the height depending on the width. Let's set this proportionality through padding-bottom: 50%;

Inside, respectively, absolutely positioned context:

 position: absolute; left: 0; top: 0; right: 0; bottom: 0;

We get the necessary proportionally changing context: https://jsfiddle.net/u7ab3ezo/

The picture inside should be 100% of the height of this container and centered. Make an img tag with height: 100%; and so far, too, everything is OK: https://jsfiddle.net/u7ab3ezo/4/

But now you need to hang a badge on the picture with a discount in the upper right corner, a bottom price and so on. This should be done exactly along the borders of the picture. To do this, try to wrap the image in inline-block with position: relative : https://jsfiddle.net/u7ab3ezo/5/

In Chrome, it turns out as it should: Chromium

In Firefox, this wrapping inline box (blue) is decomposed as if the picture had not been scaled: enter image description here

If you pull the width of the screen in Firefox, everything is really bad, the picture flies out of the screen at all. For the sake of fairness, I will say that the blue background also appears in chrome when the window is resized, but when you update / open the page, nevertheless, everything is fine.

Tried to wrap in inline-flex, in the table - does not help. It helps to wrap in inline, but then the blue area is not obtained according to the height of the picture, but along the line-height line and you can’t throw anything into the upper corners.

Tell me, please, can I finish this option somehow? Maybe you can wrap the picture inline, which will be 100% of the height of the picture? Or is the wrapper somehow absolutely positioned?

UPD1: As a result, my card should look like this. There are more complex proportionality calculations, more complex positioning from indents, but inside lies the problem described above. task

UPD2: Simplified and working version of this wrapper: https://jsfiddle.net/0v8whtrf/ In this case, Firefox behaves the same way as other browsers, tupit only when resize. When you open the page - he is good. The problems begin when I put this thing in some extreme content-type proportional tile.

  • your preview-wrap also works crookedly in other browsers, because they live different lives with the picture, I think it’s better to make another option, but for this you need a more detailed description of what the discount is and how you plan to display it, you can try it after have an image do - MasterAlex
  • Added a real picture to the question. Discount and price - I wanted them in position: absolute; scatter around the corners of the wrapper and for that I need the wrapper to collapse along the edges of the image. - Cypher
  • Isn't that right? jsfiddle.net/hrxdmo18 Why is there position: absolute at all? - dmitryshishkin
  • Unfortunately not. I need the card itself to stretch out of proportion to the width. The picture inside should also stretch out of proportion, but from the height. Like this: dl.dropboxusercontent.com/u/22619948/tiles.mov - Cypher
  • Absolute is needed because the coordinates of the absolute work from padding edge, and vertical padding, almost the only way to make something in the layout maintain proportion. on this, I stopped at the very beginning of the question. The first link to fiddle. - Cypher

1 answer 1

Advanced with display: inline;

If you wrap the picture in inline, then the problem with the decompression is solved: enter image description here

But the inline height does not cover the picture. But on the other hand, vertical padding does not affect the position of the inline and can be pulled up as a percentage of the parent! We reset the inline height to zero through font-size: 0; and set the padding-top: 50%; And it turns out what you need. Discount is now possible absolute:

https://jsfiddle.net/u7ab3ezo/7/

enter image description here