If it's ok to use jQuery, this can be done quite easily. Set the overflow
property of the parent element to scroll
:
.designer-question {
overflow: scroll;
}
And then you can set the height of each .designer-question
to the height of its img
using a simple each
loop:
$('.designer-question').each(function () {
var $el = $(this); // Get jQuery of each designer question
var $backImg = $('.back img', $el); // Get background image
$el.css('height', $backImg.height());
});
I've applied this to your jsfiddle to demonstrate: http://jsfiddle.net/jfdPb/1/