In one section on my page, I have both text and images wrapped in paragraphs.
My issue is that I want the text paragraph to be narrower (e.g. 450px) while keeping the image at its full width (e.g. 640px if screen resolution allows or full screen width).
The challenge lies in differentiating between the text and image paragraphs without any distinguishing classes due to dynamic content.
Initially, I set the paragraph width to 450px, but this constrained the image as well. Removing max-width:100% from the image made it larger than the text (640px vs. 450px), but responsiveness was lost on lower resolutions.
Any suggestions or solutions for this problem?
View Example on JsFiddle. The demonstration includes the working version with base64 code.
HTML:
<div class="wrapper">
<section class="section-class">
<p>Make this 450px wide for text only. Image needs to stay full width when resolution permits and scale to 100% with lower res.</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>
<!-- How to style this pargraph dynamically / with a css selector ? -->
<img src="data:image/png;base64,.../>
</p>
</section>
</div>
CSS:
.section-class {width:100%;}
.section-class img {max-width:100%;}/*keeps the image responsive on lower res*/
.section-class p {
/* Text needs to be narrower than the image, say 450px. The image needs to stay full width or scalable with screen width for lower res.*/
/* Tried to make text only: max-width:50%; or width:450px;*/
}
.wrapper {width:700px;}
@media (max-width: 767px) {.wrapper {width:100%;}}
@media (min-width: 1200px) {.wrapper {width:860px;}}
Expected output: something similar to this example link, except ensuring the image remains responsive by taking full screen width on lower resolutions.
Update
I am looking for something akin to Is there a CSS parent selector?. However, as of now, CSS lacks such functionality.
Possibly, CSS4 featuring has may prove helpful, resembling jQuery's has().