包含图像从容器div溢出的块锚

Question

I have the following element markup:

<div class="container">
    <a href="#">
        <img src="http://placehold.it/250x500" alt="img" />
    </a>
</div>​

with this CSS:

.container { max-width: 150px; max-height: 150px; }
.container a { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

​ see this fiddle (I added colors and opacity in there to better show my problem)

The problem is that while the anchor is fitting to his parent's width (max-width: 100%;) it's not fitting to his parent's height, it fits his child img's height instead, and I really don't know why, since I set max-height: 100%. If I change the container's max-height to just height it works, but I need it to be max-height .

PS: I don't want to hide the container's overflow (overflow: hidden), I want the anchor to be the container's height!

PPS: The problem is not in the anchor, every item I put in the container as the img's parent is gonna fit the img's height unless I give a fixed height to the container or to the img's father (in my case, the anchor), but I don't want to do that, 'cause I need it to be fluid.

PPPS: I partially answered the question: I can set the anchor's max-height to inherit, like in this example , but that's not gonna work for percentage max-height of the container, which is, unfortunately, what I need.

Answer 1

In your anchor you specified both max-height and height property. Only either one is needed.

Answer 2

I think you are trying to hide extra visible image inside the container... So,

Try Overflow : hidden in container div.

http://jsfiddle.net/E6aqZ/2/

.container { max-width: 150px; max-height: 150px; background: red; overflow: hidden }

Answer 3

Okay, so here's the answer (a colleague of mine helped me with this one):

The .container should have a fixed width OR if it's a % height it should be inside a supercontainer with a fixed height, and the anchor 's height can be successfully set to 100%.

That's it! Thanks for everyone who contributed. Here's a jsFiddle of the result.

Here's the HTML:

<div class="superContainer">
    <div class="container">
        <a href="#">
            <img src="http://placehold.it/250x500" alt="img" />
        </a>
    </div>
</div>

​

and here's the CSS:

.superContainer { height: 200px; }
.container { width: 30%; height: 50%; background: red; font-size: 0; }
.container a { display: block; width: 100%; height: 100%; background: orange; opacity: 0.7; }
.container a img { opacity: 0.7; }​

Sorry if the answer doesn't suit your needs but I needed for a very specific case. I'm eventually gonna upload a jQuery plugin of mine using this method!