Как выровнять изображения в веб-части редактора контента SharePoint для работы с любым разрешением?

Для одного из проектов я отображаю 6 изображений, написав некоторый HTML-код и вставив этот HTML-файл в веб-часть редактора содержимого. Эти изображения имеют размер 100 x 100, и я использую макет страницы с тремя зонами. Левой и правой зонам присваивается около 11,5% каждая, а средней зоне назначается около 77% ширины. У пользователей машины с разным разрешением, поэтому мне нужно, чтобы этот динамик работал на любом разрешении. Таким образом, в основном при рендеринге изображения должны устанавливаться динамически в зависимости от разрешения машины. Я написал немного HTML, но он работает для разрешения 1280 x 1024, но для 1920 x 1080 он не показывает выравнивание должным образом. Есть ли способ сделать рендеринг изображения динамическим в соответствии с выбранным разрешением? Любая помощь по этому вопросу будет принята с благодарностью.

Просто чтобы отметить, я работаю с Office 365/SharePoint онлайн. вот некоторый HTML, который я написал:

<html>
<head>
<style>
.imgContainer1{
  float:left;
 margin-right:1.4%;
    margin-left:2%;
   }
.imgContainer{
    float:left;
    margin-left:1.4%;
    margin-right:1.4%;

}
.imgContainer6{
  float:right;
  margin-left:1.4%;
  margin-right:2%;
    }
</style>
</head>
<body>

<div class="image123">
    <div class="imgContainer1">
        <a href="***">
        <img src="***"/>
       </a>
    </div>    

    <div class="imgContainer">
   <a href="***">
       <img src="***"/>
    </a>    
    </div> 

        <div class="imgContainer">
    <a href="***">
       <img src="******"/>

    </a>    
    </div>   

      <div class="imageContainer">
    <div class="imgContainer">
        <a href="***">
        <img src=***/>
       </a>
    </div> 

    <div class="imageContainer">
    <div class="imgContainer">
        <a href="***">
        <img src="***"/>
       </a>
    </div> 

    <div class="imageContainer">
    <div class="imgContainer6">
        <a href="***">
        <img src="***/>
       </a>
    </div> 



</div>
</body>
</html>

0 ответов

Другие вопросы по тегам