[Pro] Responsive image problem with cms

I’m going to weigh in here with this thought… Percentage values should never be used with max or min dimension properties.

If you want to assign a % value, assign it to the width or height properties. Max-width works like this:

 width: %; max(min)-width: px

Min and max are limiters so you set the relative width and height of an object to its parent situation, but put brakes on absurdities of extremes.

If you don’t want a flexible item to shrink below a certain value, then min is your choice. If you want a flexible item not to grow above a certain value, then max is your choice.

###Example1:

You have a container you want to take about 20% of the parent width, but never smaller than 150px, then:

width: 20%; min-width: 150px; 

###Example 2

If you have a flexible container that you never wish to grow wider than 960px… like a content container centered in the main PageDiv, then:

max-width: 960px; margin: 0 auto; 
<!-- width: 100% is assumed, provided some other style is not interfering -->

###Auto

“Auto” with dimension properties like width or height is not totally necessary. It’s like telling the browser “you figure it out.” If the browser could respond, it would just say “Duh.”

That’s all.


freewaytalk mailing list
email@hidden
Update your subscriptions at: