Possible in pure CSS?

Here's what I'd like to accomplish without the use of JavaScript, I can't figure it out maybe you can.

So I've got an unordered list, each LI contains a <img> and a <p> tag. The P tag overlay's the <img>. The LI's width are set a percentage, the images width are always 100% of the LI's width. All the images are uniform in size 480x260px, so we know the aspect ratio.

Is there a way the P block will always be the same size as the image at any particular size?

<ul>
  <li>
    <img src="" />
    <p></p>
  </li>
  <li>
    <img src="" />
    <p></p>
  </li>
</ul>

Code (markup):

li {
    list-style: none;
    max-width: 480px;
    width: 25%;
    position: relative;
}

li p {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
}

Code (markup):

 

The p will size to its contents. As the image is a sibling, there is no relationship between the size of the image and the dimensions of the p tag which is not part of the normal flow because of the absolute positioning. You will have to script it because there is no way for the dimensions of the p to respond to the size of the image without the scripting.

 

When you say "same size" what exactly do you mean? The question doesn't even make sense. Why do you need it bigger/smaller and/or what exactly are you trying to accomplish layout-wise?

Much less are you sure those are even actually grammatical paragraphs? Seems unlikely in your usage scenario.

Without seeing visually what you are trying to accomplish AND the content that markup is for, very hard to give you a proper answer... though images that large in a list does reeks slightly of "layout concepts that have no business on websites in the first place."