Изменение размера изображения, чтобы поместиться в контейнере - PullRequest
Новая
       5

Изменение размера изображения, чтобы поместиться в контейнере

0 голосов
/ 19 февраля 2020

Я пытаюсь сделать 4-х панельный экран, который бы подходил экрану любого пользователя, который к нему обращается. Изображения pu sh всего остального из div, который их охватывает. Я не хочу, чтобы это переполнилось.

Мой код: 

<div class="d-flex flex-row flex-wrap h-100">
  <div class="d-flex" style="flex-basis: 50%;">
    <img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="d-flex" style="flex-basis: 50%;">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>

Как бы я хотел выглядеть: enter image description here

Ответы [ 3 ]

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

Добавление css к изображениям должно сработать 

max-width: 100%;

https://codepen.io/genesy/pen/YzXGXXb это работает здесь .. тот же код

РЕДАКТИРОВАТЬ: превратил его в сетка, если вы хотите, чтобы изображения были одинакового размера 

<div class="wrapper">
  <div class="panel">
    <img class=" " src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="panel">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
}
.panel {
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
  width:
}
html, body {
  height: 100%;
  width: 100%:
}
0 голосов
/ 20 февраля 2020

Если вы используете Bootstrap4, вам не нужно писать одну строку кода css в соответствии со структурой вашего вложения. Поэтому следуйте ниже html с помощью предопределенных классов BS4.

Используйте vh-100 класс для высоты области просмотра 100%.
Используйте h-100 класс в row для наследования родительской высоты.
Используйте no-gutters в row классе для удаления пробела.
Используйте h-50 класс для каждой высоты столбца, установленной на 50%.
Используйте img-fluid mh-100 на изображении для ответа.

Do c: https://getbootstrap.com/docs/4.3/utilities/sizing/#relative для родителей 

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid px-0 vh-100">
  <div class="row no-gutters h-100">
    <div class="col-6 h-50">
      <img src="https://docplayer.org/docs-images/22/1321497/images/61-0.png" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
    <div class="col-6 h-50">
      <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" class="img-fluid mh-100">
    </div>
  </div>
</div>
0 голосов
/ 19 февраля 2020

Используйте CSS сетку для этого: 

.container{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

img{
  height: 300px;
}
<div class="container">
  <div class="">
    <img class="" src="https://docplayer.org/docs-images/22/1321497/images/61-0.png">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
  <div class="">
    <img src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1">
  </div>
</div>
...