1

I have a section with text and images inside it, each wrapped in paragraphs.

The problem is that I want to make the text paragraph narrower (ex. 450px) but keep the image as it is (full image width ex. 640px if screen resolution allows it or full screen width).

It would be easy if i could tell which paragraph holds the image and which holds the text so i can style it. However the content is dynamic and there is no class to tell them appart.

The first thing i did was fix the paragraph width (to 450px for example) but that made limits the image too. If i remove the max-width:100% from the image then the image is larger than the text(640px, text stays at 450) but it is no longer responsive on lower resolutions.

Do you have any suggestions ?

Js fiddle link .The basic example (js fiddle contains 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 like this http://jsfiddle.net/qvkzLs3x/1/ except the image should be responsive / i.e. have the full screen width for lower res.

Update

I believe what i am trying to achieve is similar to Is there a CSS parent selector? To the best of my knowledge CSS at this point does not have such a feature.

Perhaps CSS4 will be of use with has , similar to jQuery's has().

Community
  • 1
  • 1
Laurentiu L.
  • 6,213
  • 1
  • 28
  • 55

1 Answers1

2

try this:

.section-class p {
   width:90%;
   max-width:450px;
}

fiddle

edit

to make image responsive (from a certain breakpoint on) you can add media-query rule like:

  @media (max-width: 767px) {
  /* ... */
      .section-class > p > img {
         width:100%;
         height:auto
      }
 }
maioman
  • 15,071
  • 4
  • 30
  • 42
  • img's 100% is relative to wrapper – maioman Jun 24 '15 at 10:34
  • Except now the image is no longer responsive on lower res. It needs to scroll. Try it yourself, shrink the result box. It may be easier to miss because the image is all blue – Laurentiu L. Jun 24 '15 at 10:51
  • Will accept your answer because this is as close as CSS can get me to what i want. If i want a different max-width for my image or paragraph that holds image i will have to use javascript. Something like jQuery's has. Hope it will be implemented in CSS4. – Laurentiu L. Jun 24 '15 at 11:10
  • you could make the img responsive using media queries – maioman Jun 24 '15 at 13:39
  • I will probably end up using max-width on the images according to the media query as hacky as it may feel. – Laurentiu L. Jun 24 '15 at 13:46