Как я могу сделать фотографии обложек фильмов даже по высоте в этом макете сетки CSS?

ProgramBox

Как я могу сделать фотографии обложек фильмов даже по высоте в этом макете сетки CSS?

Post author:admin
Запись опубликована:25 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

У меня есть макет сетки, в котором отображаются некоторые фотографии с обложек фильмов. Как я могу сделать обложки в какой-то степени одинакового размера в heiit, применив a width: 500px к img элементу, но затем на мобильном экране обложки выглядят немного слишком растянутыми по высоте.

Я не ищу конкретное фиксированное значение высоты, как указано выше 500px , но я хочу, чтобы все обложки были одинаковой высоты. Ничего страшного, если изображения немного уменьшатся, когда я уменьшу окно, но я хочу, чтобы они были одинаковой высоты.

 :root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #f6f2e7;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  position: relative;
  perspective: 1000px;
}

.grid-item img {
  width: 100%;
  height: 100%;
  display: block;
}

.item-inner {
  cursor: pointer;
  transform: translateZ(-40px);
  transform-style: preserve-3d;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item-inner:hover {
  transform: translateZ(0px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}


/* Tablet */
@media screen and (min-width: 40em) {
  .movies {
    max-width: 700px;
  }

  .grid-container {
    grid-template-columns: repeat(2, auto);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  .movies {
    max-width: 1200px;
  }

  .grid-container {
    grid-template-columns: repeat(3, auto);
  }
}

 <!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="learn-grid.css">
  <title>Movies Grid</title>
</head>
<body>
  <div class="movies">
    <div class="grid-container">
      <div class="grid-item-1 grid-item">
        <div class="item-inner">
          <img src="http://smashinghub.com/wp-content/uploads/2012/06/Use-AIDA-Formula.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-2 grid-item">
        <div class="item-inner">
          <img src="https://images.moviesanywhere.com/6305a9e8ed76d5fa485ac16637655cf7/bcc68be4-eede-409b-a63d-e179b28d19b4.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-3 grid-item">
        <div class="item-inner">
          <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-4 grid-item">
        <div class="item-inner">
          <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

Ответ №1:

Я часто использую object-fit и определяю явное height для элементов сетки в CSS-сетке. Таким образом, вы можете height: 100% продолжать <img> , и он заполнит 100% высоты элементов сетки. Где каждое изображение в сетке имеет одинаковую высоту.

Я дал .item-inner высоту 30rem , чтобы определить явную высоту для каждого элемента сетки, и это значение может быть изменено по вашему вкусу. В CSS существуют единицы относительной длины, и именно здесь rem в игру вступает единица измерения. Значение rem равно размеру шрифта корневого элемента. Вы также можете просто использовать px значение для высоты .item-inner .

 :root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #f6f2e7;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  position: relative;
  perspective: 1000px;
}

.grid-item img {
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.item-inner {
  cursor: pointer;
  height: 30rem; /* 480px equivalent */
  transform: translateZ(-40px);
  transform-style: preserve-3d;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item-inner:hover {
  transform: translateZ(0px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}


/* Tablet */
@media screen and (min-width: 40em) {
  .movies {
    max-width: 700px;
  }

  .grid-container {
    grid-template-columns: repeat(2, auto);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  .movies {
    max-width: 1200px;
  }

  .grid-container {
    grid-template-columns: repeat(3, auto);
  }
}

 <!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="learn-grid.css">
  <title>Movies Grid</title>
</head>
<body>
  <div class="movies">
    <div class="grid-container">
      <div class="grid-item-1 grid-item">
        <div class="item-inner">
          <img src="http://smashinghub.com/wp-content/uploads/2012/06/Use-AIDA-Formula.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-2 grid-item">
        <div class="item-inner">
          <img src="https://images.moviesanywhere.com/6305a9e8ed76d5fa485ac16637655cf7/bcc68be4-eede-409b-a63d-e179b28d19b4.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-3 grid-item">
        <div class="item-inner">
          <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-4 grid-item">
        <div class="item-inner">
          <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

1. @ZoltanKing Дай мне знать, если это поможет решить твою проблему.

2. Это прекрасно работает, но что это .item-inner за колдовство? Я никогда не устанавливал высоту в rem.

3. @ZoltanKing Хорошо, рад, что это работает на вас. Вы можете отказаться от использования rem (размер шрифта относительно корневого элемента) и выбрать px значение таким же образом. Если размер шрифта по умолчанию в «корневом элементе» ie <html> равен 16 пикселей, то 1rem = 16 пикселей. Я обновил свой ответ, добавив немного больше объяснений.

Ответ №2:

может быть, это поможет, я сделал ширину и высоту 30%

 :root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #f6f2e7;
}

.movies {
  max-width: 1300px;
  margin: 0 auto;
}

.grid-container {
  height: 100%
  width: 100%
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  position: relative;
  perspective: 1000px;
}

.grid-item img {
  width: 30%;
  height: 30%;
  display: block;
}

.item-inner {
  cursor: pointer;
  transform: translateZ(-40px);
  transform-style: preserve-3d;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.item-inner:hover {
  transform: translateZ(0px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}


/* Tablet */
@media screen and (min-width: 40em) {
  .movies {
    max-width: 700px;
  }

  .grid-container {
    grid-template-columns: repeat(2, auto);
  }
}

/* Desktop */
@media screen and (min-width: 70em) {
  .movies {
    max-width: 1200px;
  }

  .grid-container {
    grid-template-columns: repeat(3, auto);
  }
}

 <!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="learn-grid.css">
  <title>Movies Grid</title>
</head>
<body>
  <div class="movies">
    <div class="grid-container">
      <div class="grid-item-1 grid-item">
        <div class="item-inner">
          <img src="http://smashinghub.com/wp-content/uploads/2012/06/Use-AIDA-Formula.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-2 grid-item">
        <div class="item-inner">
          <img src="https://images.moviesanywhere.com/6305a9e8ed76d5fa485ac16637655cf7/bcc68be4-eede-409b-a63d-e179b28d19b4.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-3 grid-item">
        <div class="item-inner">
          <img src="https://fanart.tv/fanart/movies/12230/movieposter/101-dalmatians-5a529ef29b36c.jpg" alt="">
        </div>
      </div>
      <div class="grid-item-4 grid-item">
        <div class="item-inner">
          <img src="https://images-na.ssl-images-amazon.com/images/I/81PWF-yAEyL._AC_SL1100_.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</body>
</html>