Сохранение изображения «вытолкнутым» за пределы области просмотра - PullRequest
Новая
       0

Сохранение изображения «вытолкнутым» за пределы области просмотра

1 голос
/ 26 февраля 2020

Я пытаюсь держать изображение немного оттесненным от правого края (окна просмотра) только для мобильных устройств, но когда я изменяю размер браузера, изображение "возвращается". Как мне сохранить его вне области просмотра независимо от того, что делать, и заставить «Некоторый текст» начинать под изображением у его левой границы?

https://jsfiddle.net/cv0bmyhL/

body {
    background-color: #ff0000 !important;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    font-weight: 800;
}

#topbar {
    color: #fff;
    font-size: 21px;
    margin: 20px 0;
    text-align: center;
    font-weight: 500;
}

.center {
    font-size: 35px;
    text-align: center;
}

.right {
    float: right;
}

#lower-text {
    color: #fff;
    font-size: 68px;
    font-weight: 500;
    float: right;
    margin: 220px 0px 120px 0;
    
}

#main-pic {
    width: 100%;
    margin-right: auto;
    margin-bottom: 50px;
    float: right;
}

@media only screen and (max-width: 770px) {

    #main-info {
        position: absolute;
        top: 0;
        right: 0;
    }

    #topbar {
        display: none;
    }

    #main-pic {
        min-height: 391px;
        min-width: 600px;
        width: 100%;
        margin-bottom: 1rem;
        position: relative;
        right: -22vw;
    }

    #lower-text {   
        font-size: 21px;
        width: 305px;
        height: 178px;
    }
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>

<body>
  <div class="container-fluid" style="margin: 0">
    <div id="topbar">
       <div class="row">
         <div class="col-sm-3">
           <span style="float: left;">Left</span>
         </div>
         <div class="col-sm-6">
           <span class="center">mid</span>
         </div>
         <div class="col-sm-3">
           <span class="right">right</span>
         </div>
      </div>
    </div>

    <div id="lower-text">
        <div class="row" style="margin: 0; padding:0;">
          <div class="col-xs-2 col-md-2"></div>
          <div class="col-xs-10 col-md-10" id="main-info" style=" margin: 0px; padding: 0px">
            <img id="main-pic" src="https://images.unsplash.com/photo-1558521958-0a228e77e984?ixlib=rb-1.2.1&w=1000&q=80">
            <span id="page-info">
              Some text
            </span> 
          </div>
        </div>
    </div>
  </div>
</body>
</html>

РЕДАКТИРОВАТЬ: чтобы уточнить, я пытаюсь сделать sh изображение немного за правым краем экрана (поэтому я не отображать полное изображение, только его часть) и хочу сохранить видимую часть pi c для всех мобильных устройств, поэтому при изменении размера браузера я все равно вижу ту же часть изображения. Также - оставьте .col-sm-2 с левой стороны от pi c пустым. Надеюсь, теперь это стало понятнее.

1 Ответ

1 голос
/ 26 февраля 2020

Итак, несколько вещей.

Вам необходимо удалить right CSS из самого изображения, чтобы выровнять текст и изображение.

Для того, чтобы вы sh изображение вне экрана, вы можете сделать что-то вроде того, что я включил, где вы разрешите Bootstrap 3 используемым классам позаботиться об этом с их свойством push. Вы также можете добавить transform: translateX(____px) к идентификатору #lower-text, чтобы переместить изображение и текст за пределы экрана. 

body {
  background-color: #ff0000 !important;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  font-weight: 800;
}

#topbar {
  color: #fff;
  font-size: 21px;
  margin: 20px 0;
  text-align: center;
  font-weight: 500;
}

.center {
  font-size: 35px;
  text-align: center;
}

.right {
  float: right;
}

#lower-text {
  color: #fff;
  font-size: 68px;
  font-weight: 500;
  float: right;
}

#main-pic {
  width: 100%;
  margin-right: auto;
  margin-bottom: 50px;
  float: right;
}

@media only screen and (max-width: 770px) {
  #main-info {
    position: absolute;
    top: 0;
    right: 0;
  }
  #topbar {
    display: none;
  }
  #main-pic {
    min-height: 391px;
    min-width: 600px;
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
  }
  #lower-text {
    font-size: 21px;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid" style="margin: 0">
    <div id="topbar">
      <div class="row">
        <div class="col-sm-3">
          <span style="float: left;">Left</span>
        </div>
        <div class="col-sm-6">
          <span class="center">mid</span>
        </div>
        <div class="col-sm-3">
          <span class="right">right</span>
        </div>
      </div>
    </div>

    <div id="lower-text">
      <div class="row" style="margin: 0; padding:0;">
        <div class="col-xs-12 col-xs-push-2" id="main-info" style=" margin: 0px; padding: 0px">
          <img id="main-pic" src="https://images.unsplash.com/photo-1558521958-0a228e77e984?ixlib=rb-1.2.1&w=1000&q=80">
          <span id="page-info">
              Some text
            </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...