Сложность содержания ребенка Divs полностью квадратный - PullRequest
Новая
       43

Сложность содержания ребенка Divs полностью квадратный

0 голосов
/ 06 апреля 2019

У меня возникли трудности с сохранением моей квадратной сетки. Я попытался установить размеры для изображений как средство для управления размером div ближе к квадратному, но это не сработало так, как я думал.

То, что следует, - это то, с чем я сейчас работаю. Как вы можете видеть, на очень широких дисплеях размеры более квадратные, а на более узких дисплеях изображения очень высокие и искаженные (например, не квадратные). 

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}
<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>

Что я могу сделать, чтобы ячейка / деления, заголовок и все остальное были полностью квадратными?

1 Ответ

1 голос
/ 07 апреля 2019

Это потому, что вы установили для всех изображений значение height: 480px независимо от ширины.Так как ширина изображений установлена ​​на 100%, они становятся более узкими на экранах меньшего размера, но высота остается неизменной.Вместо этого вы можете изменить высоту на max-height: 480px. 

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  max-height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}
<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>
...