HTML хранение изображений внутри строки без их переполнения - PullRequest
Новая
       18

HTML хранение изображений внутри строки без их переполнения

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

HTML + Aurelia screenshot

<div class="fluid-container">
  <div class="row" style="height: 100%;">
    <div repeat.for="pw of lstPainelWidgets" class="col ${getPanelCol($index)} p-0">
        <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1"
        width="100%" height="100%">
    </div>
</div>

Я пытаюсь сохранить 4 изображения (которые должны быть в одном ряду) внутри div-контейнера с жидкостью, но мои изображения продолжают его переполнять , Цель состоит в том, чтобы изображения адаптировались к контейнеру (например, сопоставление объекта: содержать) и заполняли его, а не игнорировали его пределы максимальной высоты.

Я уже пробовал img-Fluid, IMG-отзывчивый, max-height: 100%, но изображения игнорируют все эти параметры и продолжают переполняться как строкой div, так и контейнером для жидкости!

1 Ответ

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

Попробуйте использовать max-width и max-height вместо высоты и ширины. 

<div class="fluid-container">
  <div class="row" style="height: 100%;">
    <div repeat.for="pw of lstPainelWidgets" class="col ${getPanelCol($index)} p-0">
        <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
      <img class="my-img " src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
      <img class="my-img" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
    </div>
</div>

с помощью flex вы также можете ... 

<div cass="container">
    <div class="d-flex ">
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
      <div class="p-2 flex-fill bd-highlight">
        <img class="my-img img-fluid" src="https://techcrunch.com/wp-content/uploads/2017/11/graphdown.jpg?w=730&crop=1" max-width="100%" max-height="100%">
       </div>
    </div>
  </div>
...