Próbuję wstawić 8 obrazów do siatki 2x4 CSSGrid. Mam szerokość ustawioną na 100%, ale kiedy ustawię wysokość na 100%, dolny rząd obrazów kończy się poniżej stopki zamiast poniżej pierwszego rzędu obrazów. Ustawienie wysokości za pomocą px działa, ale w ogóle nie reaguje w porównaniu z użyciem%. Jakieś pomysły? Powiedziano mi, że użycie flexboksa byłoby lepsze, ale chcę tylko ściśle używać CSSGrid do tego problemu.

<!DOCTYPE html>
<html>
<head>
  <title>Layout Master</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="container">
      <div class="zone green">
            <span>About</span>
            <span>Products</span>
            <span>Our Team</span>
            <span id="Contact">Contact</span>
      </div>
      <div class="zone red">Cover</div>
      <div class="zone blue">
        <img src="data_storage_2_2.png" alt="data storage">
        <img src="desktop_analytics_2.png" alt="desktop analytics">
        <img src="files_2.png" alt="files">
        <img src="monitor_coding_2.png" alt="monitor coding">
        <img src="monitor_settings_2.png" alt="monitor settings">
        <img src= "server_2_2.png" alt="server">
        <img src="server_3.png" alt="server">
        <img src="server_safe_2.png" alt=server safe>
      </div>
      <div class="zone yellow">Made By Cristobal Manrique</div>
    </div>
</body>
</html>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr 8fr 1fr;
}

.green {
  display: flex;
  align-self: center;
}

.green span{
    margin-left: 20px;
}

#Contact {
  margin-left: auto; 
}

.zone.blue{

    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-template-rows: repeat(2, minmax(200px, 1fr));

}
.zone {
    padding:30px 50px; 
    cursor:pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

.zone:hover {
    -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
 *  Green Background
 **********************************************************************/
.green{

    background: #56B870; /* Old browsers */
    background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
    background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}

/***********************************************************************
 *  Red Background
 **********************************************************************/
.red{

    background: #C655BE; /* Old browsers */
    background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
    background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}

/***********************************************************************
 *  Yellow Background
 **********************************************************************/
.yellow{
    display: flex;
    justify-content: center;
    background: #F3AAAA; /* Old browsers */
    background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}

/***********************************************************************
 *  Blue Background
 **********************************************************************/
.blue{
    background: #7abcff; /* Old browsers */
    background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
    background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}

img{
    background-color: black;
    width: 100%;
    height: 100%;
}
0
Cris 2 kwiecień 2020, 00:02

3 odpowiedzi

Najlepsza odpowiedź

Można użyć anser @ msmoore, ale to ogranicza Twój wzrost.

Zamiast tego podałem jsFiddle Twojego przykładu z kilkoma przykładowymi obrazami z imgur sprawdź tutaj.

Prawdziwa zmiana polegała na dodaniu object-fit: cover; do twojego img css w ten sposób.

img {
    object-fit: cover; /* ensures the image tries to cover all the space given to it */
    background-color: black;
    width: 100%;
} 

Mimo to nie jest to idealny kod do obsługi obrazów / galerii - spróbuj użyć bootstrap lub podobnej biblioteki, która oferuje bardziej responsywne rozwiązania gridowe.

1
Danail Gabenski 1 kwiecień 2020, 22:55

Szybkim rozwiązaniem jest zawinięcie obrazów w kontener:

<div class="image-container">
    <img src="data_storage_2_2.png" alt="data storage">
</div>

Przykład: https://jsbin.com/qeqajozoge/edit?html,css,output

height: 100% działa tylko wtedy, gdy element nadrzędny ma również określoną wysokość. Jeśli wysokość rodzica nie jest zdefiniowana, przeglądarka będzie patrzeć na wysokość rodzica, dopóki nie znajdzie zdefiniowanej wysokości (i tak dalej), aby ją rozwiązać. Nie chcesz mieć wysokości rodzica, ale wysokość wiersza siatki i wynik jest nieoczekiwany. Aby obejść ten problem, należy dodać element div kontenera, który dopasowuje się do siatki i można ustawić wysokość obrazu na 100%.

Zwróć uwagę, że ustawienie wysokości obrazów spowoduje ich zniekształcenie, lepiej jest zachować ich proporcje. W takim przypadku możesz rozważyć inne rozwiązania, takie jak odpowiedź @Danail Gabenski. Rozwiązanie vh nie da jednak oczekiwanego wyniku w tym przypadku.

0
saulotoledo 1 kwiecień 2020, 23:22

Czy próbowałeś używać 100 vh zamiast 100%

2
msmoore 1 kwiecień 2020, 22:01