1
HTMLコンテンツテンプレート内の画像をターゲットにして、サイズに合わせてサイズを変更しようとしています。残念ながら、セクションのHTMLは第三者によってアップロードされます。私はHTMLを編集するためのアクセス権がありません。ただし、メインテンプレートのCSSスタイルシートを編集することはできます。CSSで動的に生成されたIDを使用して画像をターゲットにする方法
問題は、HTMLの構造が記事の本文画像のみを対象とする明確な方法を提供していないことです。記事内のすべての画像を対象とする場合#currentissue imgまたはp > imgテンプレート内の他の画像がサイズ変更されてしまってはなりません。唯一の明確な識別子は動的に生成されたIDですが、私はこれらのIDがどのようなものであるのか、将来的になるのか分かりません。
私は問題を示す最小限にコードをカットしようとしました。ここで
は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>
とCSS：
#currentissue {
width: 520px;
margin: 0 auto;
padding: 10px 15px;
background-color: #e4e4e4;
}
#currentissue img {
/*width:100%;*/
}
p > img {
/*width:100%;*/
}