CODEWITHSUNDEEP
cssgoogle-chromeimage-size
jaesperanza
jaesperanza

Reputation: 517

img height and max-width issue with Chrome

On this page, the columns for the video thumbnails don't seem to display consistently (equally) on Chrome. On IE and FF, both column widths are equally displayed.

My global CSS for image have been set to:

img {
height: auto;
max-width: 100%;
}

Altering any values will affect other image rendering. Any ideas?

Upvotes: 1

Views: 2834

Answers (2)

Brian Dillingham
Brian Dillingham

Reputation: 9356

Removing max-width globally fixes it, or override it with min-width instead. max-width only sets the maximum width permitted, not an actual width

.cboxElement img {
    height: auto;
    min-width: 100%;
}

Upvotes: 1

Daniel Rippstein
Daniel Rippstein

Reputation: 567

The issue is that you don't actually set a width, meaning browsers and images can render any way they want, giving unpredictable results as you've seen.

The easiest solution is to just size your columns to a fixed 50% width, like so:

.page-videos .view-video td {
    width: 50%;
}

Leave the max-width: 100% in place, it will ensure that even large images fit this 50% perfectly.

Feel free to replace the classes of my sample code, they are simply a best guess at ensuring we only change this one table, but you may know better/more-specific classes for this project.

Upvotes: 1

Related Questions