Как сделать так, чтобы контент идеально подходил к ячейкам сетки / div? - PullRequest
Новая
       33

Как сделать так, чтобы контент идеально подходил к ячейкам сетки / div?

0 голосов
/ 02 октября 2019

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

<div id="container" class="charts-wrapper chart-container">  
  <div class="main-chart-container ">
    <img src = "https://picsum.photos/id/288/300/200" class = 'img-responsive mainn-chart'/>
  </div> 
  <div class="minor-chart-container">
      <img src = "https://picsum.photos/id/237/300/200" class = 'img-responsive mainn-chart'/>
  </div>
</div>

Как примечание, такие решения, как background-image, не будут применяться, так как они на самом деле просто заполнители для другого кода компонента, который я рассматриваю. 

.charts-wrapper{
    display: grid;
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    grid-template-columns: 35fr 10fr;
    column-gap: var(--dds-spacing-m);
    align-items: stretch;
    align-content: stretch; 
    height:100%;
    background-color:yellow;
    opacity:80%;
}
.main-chart-container{
    border: 5px solid red;
    grid-column: 1;
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    height: 100%;
    width: 100%;
    background-color:green;
    opacity: 40%;
}

.main-chart-container .mainn-chart{
    align-self:stretch;
}

.minor-chart-container{
    border: 5px solid red;
    grid-column: 2;
    // position: absolute;
    display:flex;
    top: 0;
    left: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    // background-color:blue;
    opacity: 40%;
}

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

Вот несколько картинок, описывающих то, что я пытаюсь выполнить. Widget1 Расширенный виджет Как вы можете видеть здесь, когда виджет расширяется, сетка расширяется, как и ожидалось, и изображение имеет возможности изменения размера, но я хотел бы убедиться, что изображение расширяется до размераячейки сетки. Как бы я изменил свой CSS для достижения этой цели? Фоновое изображение здесь мне не поможет, так как изображение на самом деле является просто местозаполнителем для реального контента, который я хочу показать, и, если это помогает, оба являются dx-диаграммами devextreme. Мы не считаем, что это проблема с диаграммой devextreme, поскольку она прекрасно расширяется, когда это единственная диаграмма в виджете.

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

Вы можете использовать этот код 

        body {
            margin: 0;
            padding: 0;
            background-color: #ffff00;
        } 
        .charts-wrapper{
            display: grid;
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            grid-template-columns: 35fr 10fr;
            column-gap: var(--dds-spacing-m);
            align-items: stretch;
            align-content: stretch; 
            height:500px;
            background-color:yellow;
            opacity:80%;
            width: 100%;
        }
        .main-chart-container{
            border: 5px solid red;
            grid-column: 1;
            display:flex;
            align-items:flex-start;
            align-content:flex-start;
            height: auto;
            width: 100%;
            background-color:green;
            opacity: 40%;
        }
        .main-chart-container .mainn-chart{
            width: 100%;
            height: 490px;
        }
        .minor-chart-container{
            border: 5px solid red;
            grid-column: 2;
            position: absolute;
            display:flex;
            top: 0;
            right: 0;
            bottom: 0;
            height: auto;
            width: 90%;
            background-color:blue;
            opacity: 40%;
        }
        .minor-chart-container img{
            width: 100%;
        }
    <div id="container" class="charts-wrapper chart-container">  
        <div class="main-chart-container">
            <img src="https://picsum.photos/id/288/300/200" class='img-responsive mainn-chart'/>
        </div> 
        <div class="minor-chart-container">
            <img src="https://picsum.photos/id/237/300/200" class='img-responsive mainn-chart'/>
        </div>
    </div>
0 голосов
/ 02 октября 2019

вы можете использовать height + width вместо align-self:stretched и в конечном итоге подгонка объекта , чтобы избежать растягивания, но срезать, чтобы сохранить соотношение пикселей изображения.

пример: 

/* removed some style for readability */
.charts-wrapper {
  display: grid;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  grid-template-columns: 35fr 10fr;
  column-gap: var(--dds-spacing-m);
}
.main-chart-container {
  border: 5px solid red;
  background-color: green;
  opacity: 40%;
}
/* for both image */
.chart-container .mainn-chart {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position:/* see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position */ ;
}
.minor-chart-container {
  border: 5px solid red;
  opacity: 40%;
}
<div id="container" class="charts-wrapper chart-container" style="--dds-spacing-m :1em">
  <div class="main-chart-container ">
    <img src="https://picsum.photos/id/288/300/200" class='img-responsive mainn-chart' />
  </div>
  <div class="minor-chart-container">
    <img src="https://picsum.photos/id/237/300/200" class='img-responsive mainn-chart' />
  </div>
</div>
...