Question

This is a weird one:

.naReduced{
    max-height: 200px;
    height:200px;
    width: auto;
    overflow:hidden;
    border: blue 1px solid;
}
.naReduced>img{
    height: 250px;
    width: auto;
}

As you can see here: http://syndex.me (second post, which appears as a TV still of a a women drinking from a glass) overflow:hidden is being ignored.

If you inspect the element, all is in order in terms of the CSS, but the divs computed style is still set to 250px instead of 200px, why is that?

Answer 1

The reason is because of the .noArt style you have applied to the parent div. This is styled as display: table-cell; which causes the div to stretch to contain the content (as table cells do).

If you turn that off, it works as you want.