确保调整任何内容的大小以适应固定的div

Question

Ok, so here's the problem: I have a div which is set to almost the entire screen size (on a mobile device), content will be placed within it, however the content itself is not under my direct control. There will be no inline styles on images or links inside. I need to ensure that:

1 - Everything is visible within the div, and if there are long lines they are forced to wrap, or are simply cut-off.

2 - Images should maintain their aspect ratio but be resized to stay within the confines of the div.

3 - The content should "fill" the space, becoming larger or smaller as needed.

One last bonus: There will be a maximum of ONE image in the content, but there could be multiple links.

I've found some other answers on here, but nothing that meets this particular challenge.

jQuery is an option, but I've found it sluggish on mobile devices, jQuery Mobile is an option, but same basic problem.

What's the best combination of CSS and Javascript to perform this task in the most efficient way possible.

Answer 1

#wrapper {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}

.img_class {
 height:auto;
 width:auto;
 max-width:960px;
}

/*If you have a div inside your wrapper then you would need this*/

#wrapper .contained_div {
 width: auto;
 display: inline-block:
 margin: 0;
}

/*If you want to stack stuffs one after another in a column then use this div */
.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}

Answer 2

I don't think you'll need any form of JavaScript. But without a sample of what you're working with, this is my best guess:

#divId { height:auto; width:900px; white-space:normal; overflow:hidden; }
#divId img { height:auto!IMPORTANT; width:auto!IMPORTANT; max-width:900px; }

(Replace my width values with yours)

This will format the text so it displays correctly within the div, but it may come out as one blob of text, but that might be what you want. If you want formatting, you'll have to use jQuery to search the text within the div for line breaks and replace them with </p><br /><p> ... Just be sure to add opening and closing Paragraph tags.