How to get >?

Question

In a responsive design, how can the width of a

be made to adjust according to the width of the , but not exceed it?

Answer 1

Setting max-width: 100%; display: inline-block; (http://jsfiddle.net/vZpmq/1/) or float: [left|right] (http://jsfiddle.net/cdmU3/1/) on the section would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.

Alternatively, try setting width: 100%; height: auto; on the img, and set the width on the figure element? http://jsfiddle.net/9yUsP/

(setting height: auto; on the img means it's retain it's aspect ratio regardless of height or width attributes set on the img element itself)