CSS - настройка размера изображения в браузере Outlook

Question

Я пытаюсь создать новостной сайт для клиентов, который будет использоваться в браузере главной страницы Outlook.

До сих пор у меня ниже, который работает в IE и Chrome, и я доволен результатами:

Как вы можете видеть, миниатюрные изображения не содержащихся в дивы больше (выглядит background-size: cover; настройка не работает в Outlook).

Может ли кто-нибудь предложить способ достижения такого же результата в Outlook, но без использования свойства background-size: cover? Код находится внизу. Спасибо

IE и т.д.:

Перспективы:

Код:

<div class="main"> 

    <div class="article"> 

     <div class="imageBox"> 

     </div> 

     <div class="articleWrapper"> 
      <h1> New Starter in PICN </h1> 

      <p> Monday, December 7, 2015 </p> 

      <p> We are delighted to welcome Joe Bloggs ... </p> 
     </div> 
    </div> 

    <div class="divider"> 
    </div> 

    <div class="article"> 

     <div class="imageBox"> 

     </div> 

     <div class="articleWrapper"> 
      <h1> New Starter in PICN </h1> 

      <p> Monday, December 7, 2015 </p> 

      <p> We are delighted to welcome Joe Bloggs ... </p> 
     </div> 
    </div> 

    <div class="divider"> 
    </div> 

    <div class="article"> 

     <div class="imageBox"> 

     </div> 

     <div class="articleWrapper"> 
      <h1> New Starter in PICN </h1> 

      <p> Monday, December 7, 2015 </p> 

      <p> We are delighted to welcome Joe Bloggs ... </p> 
     </div> 
    </div> 

</div> 

CSS:

html { 
    overflow-x: hidden; 
} 

.main { 
    position: absolute; 
    top: 300px; 

    width: 100%;  
    height: auto; 
} 

.topbar { 
    width: 100%; 
    height: 50px; 
    background: lightgray; 

    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#logo { 
    position: absolute; 
    top: 70px; 
} 

.pinkbar { 
    color: white; 
    position: absolute; 
    top: 200px; 
    width: 100%; 
    height: 50px;  
    background: pink; 
} 

.pinkbar h1 { 
    margin: 10px; 
} 

.imageBox { 
    float: left; 
    width: 200px; 
    height: 200px; 
    background-image: url(img/image1.jpg); 
    background-size: cover; 
} 

.article { 
    overflow: hidden; 
} 

.divider { 
    width: 100%; 
    height: 1px; 
    background: lightgray; 
    margin-top: 20px; 
    margin-bottom: 20px; 

} 

Answer 1

Я смог решить эту проблему, извлекая правильные элементы с сайта SharePoint.

В моем коде на C#, где я извлекаю изображения, добавляя ?RenditionID=6 в конец URL-адреса перед сохранением в качестве изображения, локально возвращаемого стиля эскиза, который мне нужен (в этом случае мне нужно, чтобы это был квадрат - как он отображается на главной странице SharePoint).