To achieve the desired effect of making the image resolution width dictate the container width without stretching it, I am facing a challenge. Currently, when the text within a paragraph element exceeds the width of the image, the entire container expands. My goal is to have the paragraph element respect the image width and prevent the container from stretching beyond the image boundaries, all without setting a fixed width. Here's a demonstration:
#outer, #inner{
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>