Установить адаптивное изображение на центральной странице над перекрестной линией таблицы

Question

#logo-center {
    max-width: 100%;
    height: auto;
    display: flex;
}

@media only screen and (min-width:991px) {
    .logo-div {
        -webkit-margin-start: -5%;
        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 40%;
        right: 40%;
        position: absolute;
        z-index: 100;
        display: flex;
    }
}

@media only screen and (max-width:990px) {
    .logo-div {
        -webkit-margin-start: -5%;
        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 42%;
        right: 42%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:700px) {
    .logo-div {
        left: 38%;
        top: 43%;
        right: 40%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:500px) {
    .logo-div {
        left: 35%;
        top: 42%;
        right: 40%;
        position: absolute;
        z-index: 100;
    }
}

<div class="logo-div">
            <div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
        </div>

https://jsfiddle.net/8rmL5a7f/ Мне нужно изменить размер изображения в центре (чтобы быть отзывчивым в Mozilla / Chrome / т.е.)) и установить его в центре страницы, чтобы закрыть крест, где таблицаграница встречается.Мой код работает только на Firefox, но не в Chrome или IE.Кто-нибудь может помочь мне узнать почему?

Answer 1

Поскольку вы не устанавливаете ширину изображения и ваше изображение действительно большое, они переполняют разделительную пленку.

Сделайте это:

#logo-center img {
   width: 100%;
   height: auto;
}

height:auto сохранитсоотношение изображения.

На моем компьютере (Windows) в Chrome до :

ВклМой компьютер (Windows) на Chrome после :

---

Чтобы центрировать изображение в div:

Вам нужно будет сделать .table-responsive.bordered.fill и .logo-div одинаковыми width и height, а затем:

#container {
  position: relative;
}
#container .logo-div {
  postion: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

И пожалуйстаудалите свойство right в .logo-div.

По существу, top и left 50% будут выровнены в середине, но с учетом границ.Чтобы поместить в середину, учитывая центр элемента, вам нужно будет использовать transform: translate top -50% и left -50%, потому что это будет двигаться назад на основе размера дочернего элемента (.logo-div), а не родителя (#контейнер) или границы дочернего элемента.

PS: Вы можете сделать это с отрицательным полем или flexbox (justify-content и align-items on center).Но я обычно использую это решение с переводом.