Как мне получить два изображения, чтобы соответствовать любому размеру экрана в HTML? - PullRequest
Новая
       53

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

0 голосов
/ 09 июня 2019

Это моя первая попытка написания html, поэтому заранее прошу прощения за любые ошибки новичка.

Я хочу, чтобы 2 изображения одинакового размера находились в горизонтальном выравнивании в окнах браузера настольного компьютера / ноутбука и планшета, затемкак только экран переключится в мобильное «портретное» представление, я хочу, чтобы два изображения были выровнены по вертикали, но при этом были бы полностью видимыми (т. е. полоса прокрутки не появлялась).

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

  <style type="text/css">    
    html, body {
      height: 100vh;
      min-height: 100vh;
    }

    .call-outs-container {
      min-height: 100vh;
      height:auto !important;
      height:100vh;
      overflow: hidden !important;
      max-width: 2800px;
    }

    .pics {
      padding:20px;
      box-sixing: border-box;
      margin-bottom: 20px;
      flex-basis: 50%;
    }
    img {
      max-width:100%;
      height:100%;
      object-fit:contain;
    }

    @media (min-width: 700px) {
      .call-outs-container {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
      }
    }
  </style>
</head>
<body>
  <main>
    <div class="call-outs-container">

      <div class = "pics">
        <img src="images/temp_spectra.jpeg" alt="Spectra Image" />
      </div>
      <div class = "pics">
        <img src="images/temp_sl.png" alt="Spectra Image" />
      </div>

    </div>
  </main>
</body>

Следующие запросы - вот JSFiddle.https://jsfiddle.net/tullfan/t9hope6f/

Ответы [ 3 ]

1 голос
/ 09 июня 2019

Я думаю, что это решит вашу проблему. Я сделал некоторые изменения. Попробуйте этот код: 

  img{
    width: 100%;
  }

  .call-outs-container{
    display: flex;
  }

  @media (max-width: 768px){
    .call-outs-container{
      display: block;
    }
  }

И не забыл добавить видовой экран в голову: 

<meta name="viewport" content="width=device-width, initial-scale=1">
0 голосов
/ 09 июня 2019

Можно использовать размеры vw (ширина просмотра) и vh (высота просмотра) для высоты, чтобы использовать 50% всей высоты просмотра для каждого из 2 изображений.Чтобы подогнать масштабный коэффициент, просто установите для ширины значение auto, и браузер изменит ширину так, чтобы масштабный коэффициент был таким же: 

img {
    height: 50vh;
    width: auto;
}
0 голосов
/ 09 июня 2019

Надеюсь, вы ищете что-то подобное. Сделал некоторые изменения. Пожалуйста, проверьте это. 

html,
body {
  padding: 0;
}

.call-outs-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pics {
  height: 100%;
  width: 100%;
  /*margin: 0 10px; /* change margin as needed*/
  display: flex;
  justify-content: center;
}

img {
  margin: auto;
  height: auto;
  width: auto;
}

@media (min-width: 700px) {
  .call-outs-container {
    height: 100%;
    flex-direction: row;
    justify-content: center;
  }
  img {
    margin: auto;
    height: 100%;
    width: 100%;
  }
}
<body>
  <main>
    <div class="call-outs-container">

      <div class="pics">
        <img src="https://via.placeholder.com/150" />
      </div>
      <div class="pics">
        <img src="https://via.placeholder.com/150" />
      </div>

    </div>
  </main>
</body>
...