移動css故事圖像和廣告圖像

Question

所以我有一個有趣的問題出現了。最近我們在我們網站的移動版上放了一些廣告。該網站加載故事，有時在故事中呈現圖像。在移動網站上，我們採用了以下CSS：

@media screen and (orientation:portrait) { 
    img { 
     width: 200px; 
     height: 300px; 
    } 
} 

這個偉大的工程，讓我們的故事的圖像顯示爲他們應該。但是會發生的是，一旦我們添加了廣告來源，它們也會渲染圖像，然後這些圖像將以與其他圖像相同的大小比例顯示（例如：200 x 300）

我需要弄清楚一種將媒體屏幕CSS應用於文章圖像的方法，而不是頁面上呈現的所有圖像。這是我們的故事代碼塊：

  <div id="blogSingle" class="wrappedContent"> 
       <!-- Blog Meta --> 


       <p class="listMeta"> 
          <span class="listMetaDate"><span class="webFont">P</span> 04/24/2015 5:00:00</span> 
          <span class="listMetaAuthor">Newspaper Staff</span> 
       </p> 

       <h2>Story headline</h2> 

       <figure class="articleimg"> 
         <a href="article_1776425142222_1.jpg"><img style="float: right; position: relative; margin: 10px 0px 15px 10px;" src="article_1776425142222_1.jpg" alt="Image"></a> 
       </figure> 
       <p>content goes here</p> 

      </div> 

我提前道歉，因爲CSS不是我的強項。有人可以就如何爲文章圖像應用正確的CSS提供一些建議嗎？

預先感謝您。

Answer 1

@media screen and (orientation:portrait) { 
    .articleimg img { 
     width: 200px; 
     height: 300px; 
    } 
}