img div не соответствует ячейке сетки css - PullRequest
Новая
       33

img div не соответствует ячейке сетки css

0 голосов
/ 14 декабря 2018

Я пытаюсь отсортировать сетку CSS, чтобы она соответствовала моим imgs в этом проекте страницы дани из свободного кода.Мне удалось сделать сетку так, как я хотел, но я не могу вписать изображения идеально в каждую ячейку.Некоторые из них не заполняют всю камеру, а другие превышают ее.Это код: 

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;
  margin-left: 100px;
  margin-right: 100px;
  grid-column-gap: 5px;
  align-content: stretch;
  justify-content: stretch;
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21)
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  place-self: stretch;
  ;
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  place-self: end stretch;
  width: 95%;
}

.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}

img {
  width: 100%;
  height: 87%;
}

.normal {
  width: 100%;
  height: auto;
}
<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

Извините, код немного запутался при попытке исправить это.

Ответы [ 3 ]

0 голосов
/ 14 декабря 2018

Самое большое изменение, которое я сделал, это добавление свойства object-fit к вашим изображениям: 

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp

В остальном я прокомментировал только некоторые из вашихПравила, которые я посчитал ненужными для этой работы: 

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  /*grid-template-rows: 5px 5px;*/
  margin-left: 100px;
  margin-right: 100px;
  grid-gap: 5px;
  /*align-content: stretch;
  justify-content: stretch;*/
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21);
  overflow:hidden;
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  /*place-self: stretch;*/
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  /*place-self: end stretch;
  width: 95%;*/
}

/*.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}*/

img {
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/*.normal {
  width: 100%;
  height: auto;
}*/
<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>
0 голосов
/ 15 декабря 2018

вы используете 

  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;

, который кажется последовательным 3 столбца и 2 строки.

Я бы использовал 

  display:grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;

, чтобы избежать фиксированного значения и позволитьБраузер управляет размерами строк.

Затем вы используете 

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
}

, который отлично работал бы с grid-template-areas, если бы области описывали 4 столбцов и 3 строки ,что, очевидно, здесь не так (вы установили 3 столбца и 2 строки).

Я бы смело использовал здесь для grid-template-columns / grid-template-rows: 

.image-wider {
  grid-column: 2 / span 2; /* set in the second column and span through 2 columns */
  grid-row: 2;/* not really needed here since it is already standing in the last empty grid cell avalaible */
}

, указывающего только, на какую ячейку нужно пройти, вместо того, чтобы указывать перейти от ячейки 2 к ячейке 4 (grid-template-areas не было задано!)

При использовании flex или grid, если вы не знакомы с ним, сделайте его как можно более простым.

Вы могли бы начать строить свой макет сетки с несколькими дополнительными классами, чтобы сначала было легче читать, а потом настраивать.

row-gap также кажется мне более похожим наmargin-bottom для первых 2 маленьких сеток.

пример кода, разбитого на части, чтобы показать, куда отправлять каждый контейнер;) 

.grid {
  display:grid;
  margin:0 100px;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;
}

.c1 {
  grid-column:1;
}
.c2 {
  grid-column:2;a
}
.c3 {
  grid-column:3;
}

.c23 {
  grid-column:2/ span 3;
}
.r1 {
  grid-row:1;
}
.r2 {
  grid-row:2;
}
.r12 {
  grid-row:1/ span2;
}
.image-normal {
  margin-bottom:5px;
}
/* whatever size is needed , object-fit can also be used to clip and avoid pixel stretching */
img {
  height:100%;
  width:100%;
}
<div class="img-div-container grid">
  <div class="image-bigger c1 r12">
    <img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg">
    
  </div>
  <div class="image-normal c2 r1">
    <img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg">
    
  </div>
  <div class="image-normal c3 r1">
    <img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg">
    
  </div>
  <div class="image-wider c23 r2">
    <img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg">
    
  </div>
</div>

Похоже, вы смешали grid-template-areas и grid-template-rows (-columns), чтобы заполнить вашу сетку.

0 голосов
/ 14 декабря 2018

Попробуйте задать сетку-шаблон-области

и затем сетку для каждого элемента соответственно,

, например:

HTML 

<div class="grid-container">
  <div class="verticalphoto"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

CSS 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
"verticalphoto photo1 . ." "verticalphoto photo2 . ." ". . . .";
}

.verticalphoto { grid-area: verticalphoto; }

.photo1 { grid-area: photo1; }

.photo2 { grid-area: photo2; }

, чтобы соответствовать изображению, попробуйте, 

img {

 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;

}
...