Я использую сеточную структуру Bulma , чтобы настроить часть интерфейса для нашей Системы управления обучением.У меня есть простая вертикальная навигация (1 столбец на больших экранах) слева, а затем есть большой рекламный баннер в середине (8 столбцов на больших экранах) с меньшим рекламным баннером справа (3 столбца на больших экранах).).Я настроил его так, чтобы все три элемента отображались на экранах размером с настольный компьютер, а затем на немного меньших контрольных точках у меня это было так, чтобы показывали только навигацию и большое промо-шоу, а затем на мобильном устройстве, чтобы показывали только навигацию.
Проблема, с которой я столкнулся, заключается в том, что я не могу получить высоту меньшего рекламного баннера справа, чтобы он соответствовал основной рекламной акции.Я попытался отрегулировать размеры заполнителя изображения так, чтобы он не был квадратным (как сейчас), и независимо от того, что я делаю, он либо немного короче, либо немного выше основного рекламного ролика.Мне нужно, чтобы они были одинаковой высоты, когда они оба в поле зрения.
Первоначально я настроил его так, чтобы изображения оставались статического размера и были просто "обрезаны" по мере их смещения с помощью
object-fit:cover;
но это не работает IE11, который, к сожалению, является обязательным (и также не идеальным, так как эти изображения будут рекламными баннерами, а части будут обрезаны) ... вот почему я пытаюсь понять эточтобы они соответствующим образом изменили размер.
Вот JSFiddle, чтобы вы могли понять, что я имею в виду: http://jsfiddle.net/markb088/zpfbc7y3/5/
Вот код из JSFiddle, в случае, если он становится недоступным:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
@media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
@media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
@media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
* Обратите внимание, что вам нужно расширить панель результатов и свой браузер так, чтобы отображался рекламный баннер меньшего размера.Большинство CSS включено в заголовочные теги html из-за ограничений LMS.
Я не слишком знаком с сеточными системами, поэтому не уверен, что я что-то упустил, чтобы сделать этопоказать с соответствующей высотой, но все же быть отзывчивым.
Спасибо!