2016-05-13 10 views
1

Ich versuche, Bilder innerhalb einer HTML-Inhaltsvorlage zu tarnen, um sie an die Größe anzupassen. Leider wird der HTML-Code für den Bereich von Dritten hochgeladen. Ich kann den HTML-Code nicht bearbeiten. Ich kann jedoch die CSS-Stylesheets in der Hauptvorlage bearbeiten.Wie zielen Bilder mit dynamisch generierten IDs mit CSS

Das Problem ist, die Struktur des HTML gibt keine klare Möglichkeit, nur die Artikel Körper Bilder zu zielen. Wenn ich alle Bilder in dem Artikel #currentissue img oder p > img anvisiere, werden andere Bilder in der Vorlage in der Größe geändert, die das nicht sollten. Der einzige eindeutige Bezeichner ist eine dynamisch generierte ID, aber ich weiß nicht, was diese IDs im Voraus oder in der Zukunft sein werden.

Ich habe versucht, den Code auf ein Minimum zu reduzieren, das die Probleme zeigt. Hier

ist die 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> 

und die CSS:

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

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

Antwort

4

Sie können eine Unterkette Selektor in CSS verwenden, um den img id Präfix zu greifen.

img[id*='img_'] wird IDs mit 'img_' irgendwo in der Zeichenfolge erfassen.

img[id^='img_'] fängt IDs ein, beginnend mit 'img_'.

Sie können auch die Eigenschaft max-width verwenden, um Fälle zu erfassen, in denen die Bilder kleiner sind (und die Auflösung möglicherweise in voller Breite verzerrt ist).

#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>

Verwandte Themen