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

Как бы я сохранил изображение при уменьшении ширины браузера?

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

У меня есть медиа-запрос, который выравнивает кнопку непосредственно рядом с другой при уменьшении ширины браузера на ширину 991. Однако, когда я уменьшаю ширину браузера до 991px, кнопка начинает скользить под другойКнопка, а не оставаться на месте.

Во время попытки исправить это я пытался сделать его позицию абсолютной, но это не сработало.Я также попробовал список других вещей, но мне не повезло

Как бы заставить его остаться на месте, когда ширина моего браузера меньше 991px?

Заранее извиняюсь, еслиэто выглядит как расплывчатый вопрос. 

@media screen and (max-width: 991px) {
 a.myImg {
      position: absolute;
      margin-left: 11em;
      margin-top: -7.7em;
  }
}

Вот HTML: 

<div class="container-fluid">
    <div class="col-md-6">
        <a href="#" class="myImg col-md-6 col-sm-5 col-xs-5">
            <img src="picture/path"/>
        </a>
    </div>
</div>

1 Ответ

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

@ greyskies Я не совсем уверен, что точно понимаю, чего бы вы хотели достичь, но я создал для вас два примера на codePen

Сценарий 1: у вас есть оба вашихкнопки в том же «ящике» -> в этом случае я добавил несколько CSS для поддержки плавающего слева от ваших кнопок и сделал их наполовину меньше ширины области просмотра

Сценарий 2: у вас ваши кнопки в двух полях рядомдруг другу -> для этого я просто изменил классы на полях с 'col-md-6' на 'col-6'

Если это не то, что вам нужно, было бы полезно, если бы выможно прикрепить скриншот желаемого результата

HTML: 

<div class="container-fluid v1">
  <h1>version 1</h1>
  <div class="row">
    <div class="col-md-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-1"/>
        </a>
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-2"/>
        </a>
    </div>
  </div>
</div>
<div class="container-fluid v2">
  <h1>version 2</h1>
  <div class="row">
    <div class="col-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-1"/>
        </a>
    </div>
    <div class="col-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-2"/>
        </a>
    </div>
  </div>
</div>

Скомпилированный CSS: 

.myImg img {
  display: block;
  width: 100%;
  height: auto;
}

.v1 .myImg {
  width: 48%;
  margin: 0 1%;
  float: left;
}
...