Выравнивание и масштабирование изображений в bootstrap по полному с DIV - PullRequest
Новая
       3

Выравнивание и масштабирование изображений в bootstrap по полному с DIV

0 голосов
/ 18 апреля 2020

Я пытаюсь вставить 8 изображений и кнопку в div в шаблоне bootstrap Joomla. Мне нужно, чтобы изображения были выровнены по вертикали по центру и горизонтально выровнены по горизонтали во всех адаптивных видах (мобильный, планшет, маленький ноутбук, большой экран с разрешением до 1920 пикселей). Это мой тестовый веб-сайт:

webdisenjo.nl и lo go div - это "moduletable logos_home"

Я борюсь с тем, что должно с изображением быть и как поместить их в div.

Теперь я попробовал этот класс.
<div class="logo-inline-div"><img src="images/logo/Logo_3WO.png" /></div>

, но он не работает хорошо.

I также пробовал этот класс

<div class="row"><div class="col-8"></div></div>

.col-8{width: 10%;}

Но это также не работает.

Ответы [ 3 ]

0 голосов
/ 18 апреля 2020

Я немного очистил ваш код и добавил класс clients-section

, поэтому просто попробуйте добавить ниже html внутри вашего logos_home и использовать это css, и это будет выглядеть так

enter image description here

<div class="custom logos_home">
   <div class="row clients-section">
      <div class=""><img src="/images/logo/Logo_3WO.png" alt="pubblikvos Logo_3WO"></div>
      <div class=""><img src="/images/logo/Logo_ACP.png" alt="pubblikvos Logo_ACP"></div>
      <div class=""><img src="/images/logo/Logo_Amvest.png" alt="pubblikvos Logo_Amvest"></div>
      <div class=""><img src="/images/logo/Logo_CBRE.png" alt="pubblikvos Logo_CBRE.png"></div>
      <div class=""><img src="/images/logo/Logo_Fine-Hotels-Suites.png" alt="pubblikvos Logo_Fine-Hotels-Suites"></div>
      <div class=""><img src="/images/logo/Logo_Greystar.png" alt="pubblikvos Logo_Greystar"></div>
      <div class=""><img src="/images/logo/Logo_MiCompany.png" alt="pubblikvos Logo_MiCompany"></div>
      <div class=""><img src="/images/logo/logo_NS.png" alt="pubblikvos logo_NS"></div>
   </div>
   <div><a class="knop_alle-clienten" href="/nl/projecten">Alle clienten</a></div>
</div>



.clients-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.logos_home {
    text-align: center;
}

a.knop_alle-clienten {
    margin: 40px 0 0;
    display: inline-block;
}
0 голосов
/ 18 апреля 2020 

div.logo-inline-div {
  text-align: center;
  margin: auto;
  padding: 16px 24px 10px 10px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.col-1 {
  width: 12.4%;
}
img {
  width: 100px;
  height: 200px;
  object-fit: cover;
}

@media screen and (max-width: 680px) {
  .col-1 {
    width: 100%;
    margin: 0;
  }
  div.logo-inline-div {
    padding: 5px;
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="EightImages.css" />
    <link rel="images" href="images" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>

            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />

            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />

            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />

            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>

            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
        <div class="col-sm-12 col-1">
          <div class="logo-inline-div">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
            <label>Build an Empire</label>
            <p>
              Test
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 18 апреля 2020

если у вас есть набор фотографий в одном делении, и вы хотите, чтобы они всегда были одинакового размера, когда вы хотите изменить размер экрана, вам нужно, чтобы эти изображения были одинакового размера, или вы должны заставить их быть тот же размер. Вы можете легко обернуть изображения с помощью div, а затем отобразить его: flex; и flex-wrap: обертывание; затем дайте изображениям некоторую ширину: например, если вы хотите, чтобы 4 фотографии в строке давали ширину каждого изображения 25%.

Надеюсь, это полезно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...