Как определить, является ли изображение видимым или нет? - PullRequest
Новая
       11

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

0 голосов
/ 16 января 2019

Итак, у меня есть блок episerver для формы.На рабочем столе и на больших экранах форма отображается с изображением справа.На меньших экранах изображение скрыто.

Когда изображение скрыто, я хотел бы сделать форму шире, чтобы заполнить недостающее пространство.Изображение не имеет своего собственного класса div.Это фоновое изображение содержащего элемента div. 

<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
    <div class="row">
        <div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(@Url.ContentUrl(Model.CurrentBlock.Image))">
            <div class="row">
                <div class="@(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
                    <div class="whitepaper">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

. Я также изменил вышеприведенное, чтобы при отсутствии формы на странице через редактор EPIserver строка по умолчанию имела полную ширину.

Мой css для .gatedbg

@media (max-width: 960px) {
    .gatedbg {
        background-image: none !important;
    }
}

Есть ли метод в EPIserver или ASP.Net/MVC, чтобы определить, когда фоновое изображение скрыто от просмотра в браузере?

Если я правильно понял, я не могу использовать javascript на этой странице бритвы, потому что это код на стороне сервера?

1 Ответ

0 голосов
/ 16 января 2019

Эти pb-5 pt-3 классы предположительно являются частью некоторой системы координат, которая отвечает за ширину столбцов? Соответствуют ли 960px одной из отзывчивых точек останова, используемых этой системой?

Если это так, вам, вероятно, просто нужно установить разные классы (чтобы форма занимала полную ширину и полностью скрывал столбец «изображение»);

в противном случае вам может потребоваться перезаписать ширину, явно указанную в этих классах, в таблице стилей.

...