Как сделать изображения адаптивными с помощью CSSGrid - PullRequest
Новая
       1

Как сделать изображения адаптивными с помощью CSSGrid

0 голосов
/ 02 апреля 2020

Я пытаюсь вставить 8 изображений в CSSxrid 2x4. Я установил ширину на 100%, но когда я установил высоту на 100%, нижний ряд изображений оказывается ниже нижнего колонтитула, а не под первым рядом изображений. Установка высоты с помощью px работает, но не реагирует на использование%. Любые идеи? Мне сказали, что лучше использовать flexbox, но я хочу просто строго использовать CSSGrid для этой проблемы. 

<!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%;
}

Ответы [ 3 ]

2 голосов
/ 02 апреля 2020

Вы пробовали использовать 100vh вместо 100%

1 голос
/ 02 апреля 2020
Можно использовать

@ msmoore's anser, но это ограничивает ваш рост.

Вместо этого я предоставил jsFiddle вашего примера с некоторыми образцами изображений из imgur , проверьте его здесь.

Реальным изменением было добавление object-fit: cover; к вашему img css следующим образом. 

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

Тем не менее, это не идеальный код при работе с изображениями / галереями - попробуйте использовать bootstrap или подобная библиотека, которая предлагает более гибкие сеточные решения.

0 голосов
/ 02 апреля 2020

Быстрое решение - обернуть ваши изображения в контейнер: 

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

Пример: https://jsbin.com/qeqajozoge/edit?html, css, вывод

height: 100% работает только тогда, когда элемент-предок также имеет определенную высоту. Если высота родителя не определена, браузер будет смотреть на высоту родителя родителя, пока не найдет определенную высоту (и т. Д.), Чтобы разрешить ее. Вы не хотите высоту родителя, но высота строки сетки, и результат является неожиданным. Обходной путь - добавить контейнер div, который подстраивается под сетку, и вы можете установить высоту вашего изображения на 100%.

Обратите внимание, что установка высоты изображений будет искажать их, лучше, если вы можете сохранить их соотношение сторон. В таком случае вы можете рассмотреть другие решения, такие как ответ @Danail Gabenski. Однако решение vh не даст вам желаемого результата в этом случае.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...