Как выровнять адаптивное изображение на листовой карте с помощью CSS - PullRequest
Новая
       5

Как выровнять адаптивное изображение на листовой карте с помощью CSS

0 голосов
/ 10 ноября 2018

Я делаю веб-карту (с листовкой). Эта карта содержит одно изображение PNG, и я хочу показать в мобильном телефоне с максимальной шириной: 50% стиль. Изображение отображается с максимальной шириной: 50%, но я не могу выровнять изображение справа от карты.

Это мой js код для добавления изображения: 

var logo1 = L.control();
logo1.onAdd = function(map){
    var div = L.DomUtil.create('div');
    div.innerHTML= "<div href='https://www.uma.es/'><img class='resp1' src='logo1.png'/></div>";

    return div;
}  logo1.addTo(map);

и это мой стиль CSS: 

@media screen and (max-width: 500px) {
img.resp1 {
    max-width: 50%;
    text-align: right;
} } @media screen and (min-width: 760px) { img.resp1 {
max-width: 100%;}}

Результат и графическое объяснение проблемы:

enter image description here

1 Ответ

0 голосов
/ 10 ноября 2018

Вы всегда можете установить вертикальный или горизонтальный центр любого элемента, если контейнер имеет фиксированную высоту, используя относительную позицию для родительского элемента и абсолютную позицию для дочернего элемента, например, для центра x и y: 

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background: green;
}
<div class="container-elment">
  <div class="child-element">

  </div>
</div>

для центра х: 

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 50%;
  background: green;
}
<div class="container-elment">
  <div class="child-element">

  </div>
</div>

для центра y: 

.container-elment {
  position: relative;
  width: 100%;
  height: 450px;
}

.child-element {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50%;
  height: 50%;
  background: green;
}
<div class="container-elment">
  <div class="child-element">

  </div>
</div>
...