Как зафиксировать высоту div независимо от высоты изображения внутри него - PullRequest
Новая
       11

Как зафиксировать высоту div независимо от высоты изображения внутри него

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

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

Я хочу, чтобы размеры изображений были изменены в div. Но я получаю другой размер div, так как размер изображений myImage1.png, myImage2.png и myImage3.png отличается.

Это происходит потому, что я исправил заполнение в моем классе 'bg'. Может кто-нибудь помочь мне исправить это? Ниже мой HTML и CSS код. 

<div class="row IDE_container">
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="bg">
            <img src="myImage1.png" class="IDE_div" />
        </div>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-2">
        <div class="circle_bg circle_bg_sm">
            <img src="myImage2.png" class="IDE_div" />
        </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="circle_bg">
            <img src="myImage3.png" class="IDE_div" />
        </div>
    </div>
</div>

.bg{
    background-color: #ededed;
    border-radius: 100%;
    text-align: center;
    padding: 35% 5%;
    width: max-content;
    max-width: 100%;
    box-shadow: 0 0 3px 1px #DDD;
}

.IDE_div {
display: inline-block;
position: relative;
width: 100%; 
height: 100%;
}

.IDE_container {
    display: flex;
    align-items: baseline;
  }

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

Для изображений различного типа можно использовать свойство object-fit.

Добавьте CSS следующим образом: 

.IDE_div{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-3">
    <div class="circle_bg">
        <img src="myImage3.png" class="IDE_div" />
    </div>
</div>

Подробную информацию о object-fit и object-position вы найдете здесь: https://css-tricks.com/on-object-fit-and-object-position/

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

Вам необходимо установить высоту или максимальную высоту для элементов, содержащих изображения, или они будут адаптироваться к высоте их содержимого (изображений). Поскольку вы установили изображения на 100% ширину и высоту и не ограничивали их родителей, они будут становиться максимально большими в зависимости от исходного размера изображения.

Так, например: 

.IDE_container {
  display: flex;
  align-items: baseline;

  div.col-3 {

    div {
      height: 200px;

      .IDE_div {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: var(--val);
          padding-bottom: var(--val);
          transform: translate(-50%, -50%);
          z-index: -1;
          border-radius: 50%;
        }
      }
    }
  }
}

Вы можете присвоить всем контейнерам один и тот же класс (например, fixed-height-bg) для более удобного их оформления.

Также обратите внимание : Вам не нужно указывать в столбцах отдельные классы для разных размеров экрана, поскольку они всегда занимают одинаковую пропорцию. Таким образом, вы можете просто использовать 

 <div class="col-3">
        <div class="circle_bg">
            <img src="myImage3.png" class="IDE_div" />
        </div>
    </div>

EDITED, чтобы добавить: если вы хотите, чтобы изображения сохраняли свои пропорции, вам нужно изменить css, чтобы он выглядел следующим образом: 

img {
  height: 100%; /* height of the parent container if specified, or of the image itself */
  width: auto; /* will maintain the proportions of the image */
}

Вы также можете переключить эти значения в высоту: авто; ширина: 100%; если вы хотите, чтобы изображения занимали всю ширину.

...