我正在尝试在HTML内容模板中定位图片，以便调整它们以适应它们。不幸的是，该部分的HTML由第三方上传。我没有权限编辑HTML。但我可以在主模板中编辑CSS样式表。
问题是，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%;*/
}
答案 0 :(得分：4)
您可以在CSS中使用子字符串选择器来获取img id前缀。
img[id*='img_']会在字符串中的任意位置使用'img_'捕获ID。
img[id^='img_']将捕获以'img _'开头的ID。
您可能还希望使用max-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>