css сетка адаптивных изображений в клетках - PullRequest
Новая
       18

css сетка адаптивных изображений в клетках

0 голосов
/ 03 ноября 2018

Я пытаюсь взять этот дизайн: https://imgur.com/a/6yKmkIs

и используйте сетку CSS для создания адаптивного макета.

Пока у меня есть следующее (кстати, очень новое для cssgrid):

CSS: 

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.gridwrapper {
    margin:0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #fff;
    color: #444;
    height:100vh;

}

.box {
    background-color: #444;
    color: #fff;

    padding: 20px;
    font-size: 150%;

}

.a {
    grid-column:1;
    grid-row: 1 /span 2;
    background-image: url("images/grid2018guide/images/leftbar_02.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.b {
    grid-column: 2 ;
    grid-row: 1 ;
}

.b img {width:100%;}
.c {
    grid-column:3 ;
    grid-row: 1 ;
}
.d {
    grid-column: 4;
    grid-row: 1;

}
.e {
    grid-column: 2;
justify-content: center;

}

.e img {width:100%;}

HTML: 

<body>

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

https://codepen.io/sackling/pen/QJWKBo

Я пытаюсь выполнить несколько вещей:

  1. полная высота / ширина макета
  2. адаптивные изображения, центрированные в их ячейках

проблемы у меня:

  1. изображения вызывают вертикальную полосу прокрутки
  2. если я установлю ширину изображений на 50% (в качестве теста), я не могу понять, как их центрировать.

Ответы [ 3 ]

0 голосов
/ 03 ноября 2018

Я попробовал, не уверен, что это именно то, что вам нужно.

Html: 

<div class="gridwrapper">
    <div class="box a"><img src="https://images.unsplash.com/photo-1531923261682-53ef27714b13?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=95fb28afe334178bb4af65a319b5a96a"></div>
    <div class="box b"><img src="https://images.unsplash.com/photo-1516545952257-5fec7b2f00c0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=61bf30ca75018d66f24307360036754b"></div>
    <div class="box c"><img src="https://images.unsplash.com/photo-1502758594676-9d84cb9bc2e6?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=632e92e24c4d13cc39a398049ed70350"></div>
    <div class="box d"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box e"><img src="https://images.unsplash.com/photo-1504716475170-e69bea1ef6b3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b6df4e2fa5314bc9fc9a58def94f3086"></div>
    <div class="box f"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box g"><img src="https://images.unsplash.com/photo-1520880616730-aedffe34fdab?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fac5f554f014db0556d0ce3d4220a761"></div>
</div>

Css: 

body {
  height: 200vh;
}

.gridwrapper {
  background-color: #ccc;
  display: grid;
  grid-template-columns: 300px repeat(auto-fill, minmax(50px, 200px));
  grid-template-rows: repeat(4, 200px);
  grid-gap: 10px;
  grid-auto-flow: row;
  justify-content: center;
}

.box {
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-content: center;
}

.a {
  grid-row: span 2;
}

img {
   width: 100%;
   height: auto;

}
0 голосов
/ 03 ноября 2018

Похоже, у вас есть 100% ширина и высота. Что вы хотите сделать, это удалить теги <img> из HMTL и просто использовать свойство background для ваших изображений. Это правило стиля: background: url(https://placeimg.com/220/220/any) center / cover; дает вам центрированное изображение, которое отвечает за div: 

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.gridwrapper {
    margin:0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: #444;
    height:100vh;
}

.box {
    background-color: #444;
    color: #fff;

    padding: 20px;
    font-size: 150%;
}

.a {
    grid-column:1;
    grid-row: 1 /span 2;
    
}

.b {
    grid-column: 2 ;
    grid-row: 1 ;
    background: url(https://placeimg.com/220/220) center / cover;
}

.b img {width:100%;}

.c {
    grid-column:3 ;
    grid-row: 1 ;
}
.d {
    grid-column: 4;
    grid-row: 1;

}
.e {
    grid-column: 2;
   background: url(https://placeimg.com/220/220/any) center / cover;

}

.e img {width:100%;}
<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>
0 голосов
/ 03 ноября 2018

объедините css grid с css flex для вашего достижения:

HTML: 

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

CSS: 

*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .gridwrapper {
        margin:0 auto;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background-color: #fff;
        color: #444;
        height:100vh;

    }

    .box {
        background-color: #444;
        color: #fff;

        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column:1;
        grid-row: 1 /span 2;
        background-image: url("https://i.imgur.com/Qn8gJmh.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }

    .box:not(.a) {
    display:flex;
    justify-content:center;
}

.box:not(.a) img {
    display:block;
    width:100%;
}

https://codepen.io/carolmckayau/pen/jQOVer

использование медиазапроса / с для манипулирования макетом мобильного телефона

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

Похожие темы

...