CODEWITHSUNDEEP
cssless
RobVious
RobVious

Reputation: 12925

LESS conditional padding?

Maybe conditional padding isn't the way to go, but -

I have a div that contains an <img>, which should fill up the available vertical space (90px) if it can, otherwise it should be centered vertically. Here's a fiddle to demo the problem:

http://jsfiddle.net/PTSkR/165/

How can I use LESS / CSS (not JS) to accomplish this? 

// code for image
.folder-box img {
    max-height: 90px;
    max-width: 100%;
}

Upvotes: 1

Views: 876

Answers (1)

nirazul
nirazul

Reputation: 3955

If I understand you correctly, this is a simple CSS problem, which can be solved by using vertical centering:

Example Fiddle

The only styles I've added are those of the images:

.folder-box img {
    top: 0; left: 0; bottom: 0; right: 0;
    position: absolute;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Should you need defined space for your title element, you could simply wrap the image into another container and set padding-bottom and position: relative.

Upvotes: 1

Related Questions