Изображение растянуто в мобильном виде с использованием сетки css - PullRequest
Новая
       43

Изображение растянуто в мобильном виде с использованием сетки css

1 голос
/ 13 января 2020

Я использовал сетку css, чтобы разместить изображение, и на рабочем столе оно выглядит правильно, но на мобильном оно растягивается вертикально. Я установил другое изображение с такими же размерами, которое показывает правильно. Все установлено одинаково. Пожалуйста, найдите ниже css код для обоих изображений. У меня проблемы с именем изображения ci c -img. Vo c -img отображается правильно. 

.voc {
   display:grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow:hidden;
}

.voc-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   width: 100%;
   max-height: 100%;
}

.cic {
   display: grid;
   grid-template-columns: repeat(4, 25%);
   grid-template-rows: max-content(30%) auto max-content(33%);
   grid-gap: 10px;
   margin: 9rem auto;
   padding: 0 4rem;
   width: 850px;
   text-align: center;
   overflow: hidden; 
}

.cic-img {
   grid-column: 2 / 4;
   grid-row: 1/ 4; 
   height: 100%;
   width:100%;
}

1 Ответ

1 голос
/ 13 января 2020

В вашем CSS я вижу, что ваши .cic-img и .voc-img не имеют идентичных свойств высоты (max-height: 100% против height: 100%). Это, скорее всего, объясняет, почему два изображения не отображаются одинаково.

Подумайте о замене .cic-img height: 100% на max-height: 100%, так что его высота не обязательно должна быть ровно 100%.

И, как дополнительная нота, вместо игры вокруг для ширины и высоты свойство object-fit CSS должно быть полезным.

...