How to target images with dynamically generated ids with CSS

Question

I am trying to target images within an HTML content template in order to resize them to fit. Unfortunately, the HTML for the section is uploaded by a third party. I do not have access to edit the HTML. I CAN however edit the CSS stylesheets in the main template.

The problem is, the structure of the HTML does not give any clear way to target only the article body images. If I target all images in the article #currentissue img or p > img Then other images in the template get resized that shouldn't. The only clear identifier is a dynamically generated id, but I do not know what those ids will be in advance or the future.

I've tried to cut the code down to a minimum that shows the problems.

Here is the HTML:

<div id="currentissue">
    <div class="interview">
        <div class="rounded_wrapper">
            <p><img class="rounded profile-pic" src="http://images.freeimages.com/images/thumbs/8a2/smiley-1-1464309.jpg" alt="profile pic"></p>
        </div>
        <div class="interview-meta">
            <h2 class="interview-title">Title of Article<br></h2>
            <p class="meta"><span class="month">Volume 2016 Issue May, May 2016</span> <span class="divider">|</span> by <a href="#">Arya Stark</a></p>

            <p><img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/pressing-the-button-100229186.jpg" alt="article img"></p>    
        </div>
    </div>
    <hr>

    <p>Article</p>
    <p>Volume 2016, Number May (2016), Pages 1-10</p>
    <p><b>Lorem ipsum dolor sit amet</b></p>
    <blockquote>
        <p><i>...pro minim aperiri mnesarchum at. Mel vocibus honestatis ex, ne qui exerci aliquip forensibus, doming inimicus principes cum ex. Pri in dicat equidem, cu assum scripta instructior ius. Est debitis atomorum disputationi at. Ius liber antiopam petentium ei.</i></p>
        <p>Associate Editor</i></p>
    </blockquote>

    <p><b>Reque novum urbanitas te quo</b></p>
    <p>at hinc tractatos comprehensam eum. Aperiam temporibus qui cu, id idque legimus erroribus sit. Ignota accusamus duo cu, ex etiam eripuit definitionem nam, pri ut omnis ancillae euripidis. Eam quot perpetua reprehendunt cu, in quo adhuc graeco tritani. Usu ad definiebas reprehendunt, usu nulla eruditi accusata id. Vel dicta aliquip eu. Ad pri doming possit voluptaria, labore constituto eloquentiam in nec.</p>

    <p>Ne legere animal prodesset ius, in quo iudico placerat dissentias. Ut usu mazim definiebas. Regione officiis reprimique et vis, no probo possim mel. An habeo malis consectetuer per, vis eleifend scriptorem ne, ponderum phaedrum mandamus no mel. Ne mea adhuc convenire gubergren. Labores perpetua adipiscing te vix, cu vis viderer omnesque.</p>

    <p><img id="img_37989" src="http://deliveryimages.acm.org/10.1145/2940000/2933230/ins02.gif" alt="ins02.gif"> <b>Figure 2. Fastest 40 Results. (Source: University of Arkansas website; Data Hogs stories at <a href="#" target="_blank">#</a>)</b>
        <br clear="all">
    </p>

    <p><b>Ei ius justo tractatos, facilisi consetetur vel at</b></p>
    <p>Lorem omnesque et usu, commodo prompta dissentiet eu eos. Cu tale pericula sed. His te sint iuvaret, habeo assentior nam ex. Causae mnesarchum ut nam. At has efficiendi neglegentur. Usu eu altera melius, te aliquid atomorum pro, sumo eius adipisci eam cu. Vis nibh dolor dolores in, ex modus assueverit pro. An dicit affert maiestatis sed, dico nulla epicuri at mei. Illum semper sed ne.</p>

    <p><img id="img_37991" src="http://deliveryimages.acm.org/10.1145/2940000/2933230/ins03.gif" alt="ins03.gif"> <b>Figure 3. Geometrical 3D-MOT speed threshold means for 308 individuals on a log scale separated into professional, elite-amateur and non-athlete university students as a function of training sessions. (Source: Faubert, J. <a href="#" target="_blank">Professional athletes have extraordinary skills for rapidly learning complex and neutral dynamic visual scenes</a>. <i>Scientific Reports 3</i>, Article Number 1154 (2013).)</b>
        <br clear="all">
    </p>

    <p><b>No exerci percipitur cum.</b></p>
    <p>Dissentias philosophia vis in, qui ut electram intellegat. Quo ut primis partiendo, quo id amet nihil apeirian. At eos iusto legendos, has tantas aliquando definiebas no, eu sed possit theophrastus. In ius salutandi adolescens, sententiae persequeris philosophia eu pri. Pri possim melius id, ad ius nihil integre. Platonem appellantur cu vim, vim odio idque nostro no, sea civibus albucius cu. Ne has vocent vituperata, sumo nullam deseruisse ex ius.</p>

</div>

and the CSS:

#currentissue {
    width: 520px;
    margin: 0 auto;
    padding: 10px 15px;
    background-color: #e4e4e4;
}
#currentissue img {

    /*width:100%;*/
}
p > img {
    /*width:100%;*/
}

Answer 1

You can use a sub-string selector in CSS to grab the img id prefix.

img[id*='img_'] will capture ids with 'img_' anywhere in the string.

img[id^='img_'] will capture ids beginning with 'img_'.

You may also want to use the max-width property to capture cases where the images are smaller (and resolution might distort in full width).

#currentissue {
    width: 520px;
    margin: 0 auto;
    padding: 10px 15px;
    background-color: #e4e4e4;
}
#currentissue img[id^='img_'] {
    max-width: 100%;
}

<div id="currentissue">
    <div class="interview">src
        <div class="rounded_wrapper">
            <p><img class="rounded profile-pic" src="http://images.freeimages.com/images/thumbs/8a2/smiley-1-1464309.jpg" alt="profile pic"></p>
        </div>
        <div class="interview-meta">
            <h2 class="interview-title">Title of Article<br></h2>
            <p class="meta"><span class="month">Volume 2016 Issue May, May 2016</span> <span class="divider">|</span> by <a href="#">Arya Stark</a></p>

            <p><img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/pressing-the-button-100229186.jpg" alt="article img"></p>    
        </div>
    </div>
    <hr>
  
    <p>Article</p>
    <p>Volume 2016, Number May (2016), Pages 1-10</p>
    <p><b>Lorem ipsum dolor sit amet</b></p>
    <blockquote>
        <p><i>...pro minim aperiri mnesarchum at. Mel vocibus honestatis ex, ne qui exerci aliquip forensibus, doming inimicus principes cum ex. Pri in dicat equidem, cu assum scripta instructior ius. Est debitis atomorum disputationi at. Ius liber antiopam petentium ei.</i></p>
        <p>Associate Editor</i></p>
    </blockquote>

    <p><b>Reque novum urbanitas te quo</b></p>
    <p>at hinc tractatos comprehensam eum. Aperiam temporibus qui cu, id idque legimus erroribus sit. Ignota accusamus duo cu, ex etiam eripuit definitionem nam, pri ut omnis ancillae euripidis. Eam quot perpetua reprehendunt cu, in quo adhuc graeco tritani. Usu ad definiebas reprehendunt, usu nulla eruditi accusata id. Vel dicta aliquip eu. Ad pri doming possit voluptaria, labore constituto eloquentiam in nec.</p>

    <p>Ne legere animal prodesset ius, in quo iudico placerat dissentias. Ut usu mazim definiebas. Regione officiis reprimique et vis, no probo possim mel. An habeo malis consectetuer per, vis eleifend scriptorem ne, ponderum phaedrum mandamus no mel. Ne mea adhuc convenire gubergren. Labores perpetua adipiscing te vix, cu vis viderer omnesque.</p>

    <p><img id="img_37989" src="http://deliveryimages.acm.org/10.1145/2940000/2933230/ins02.gif" alt="ins02.gif"> <b>Figure 2. Fastest 40 Results. (Source: University of Arkansas website; Data Hogs stories at <a href="#" target="_blank">#</a>)</b>
        <br clear="all">
    </p>

    <p><b>Ei ius justo tractatos, facilisi consetetur vel at</b></p>
    <p>Lorem omnesque et usu, commodo prompta dissentiet eu eos. Cu tale pericula sed. His te sint iuvaret, habeo assentior nam ex. Causae mnesarchum ut nam. At has efficiendi neglegentur. Usu eu altera melius, te aliquid atomorum pro, sumo eius adipisci eam cu. Vis nibh dolor dolores in, ex modus assueverit pro. An dicit affert maiestatis sed, dico nulla epicuri at mei. Illum semper sed ne.</p>

    <p><img id="img_37991" src="http://deliveryimages.acm.org/10.1145/2940000/2933230/ins03.gif" alt="ins03.gif"> <b>Figure 3. Geometrical 3D-MOT speed threshold means for 308 individuals on a log scale separated into professional, elite-amateur and non-athlete university students as a function of training sessions. (Source: Faubert, J. <a href="#" target="_blank">Professional athletes have extraordinary skills for rapidly learning complex and neutral dynamic visual scenes</a>. <i>Scientific Reports 3</i>, Article Number 1154 (2013).)</b>
        <br clear="all">
    </p>

    <p><b>No exerci percipitur cum.</b></p>
    <p>Dissentias philosophia vis in, qui ut electram intellegat. Quo ut primis partiendo, quo id amet nihil apeirian. At eos iusto legendos, has tantas aliquando definiebas no, eu sed possit theophrastus. In ius salutandi adolescens, sententiae persequeris philosophia eu pri. Pri possim melius id, ad ius nihil integre. Platonem appellantur cu vim, vim odio idque nostro no, sea civibus albucius cu. Ne has vocent vituperata, sumo nullam deseruisse ex ius.</p>

</div>