ограничить максимальную высоту и максимальную ширину столбца - PullRequest
Новая
       5

ограничить максимальную высоту и максимальную ширину столбца

0 голосов
/ 04 декабря 2018

У меня есть два столбца (ширина которых установлена ​​на 300 пикселей), вложенных в div.Один для изображения, другой для текста.

Проблема: Я получаю изображения со стороннего веб-сайта, поэтому их размеры различаются.Некоторые в портрете, другие в пейзаже.И это портит макет.Портретные фотографии могут быть очень высокими.В то время как пейзажные фотографии, ограниченные шириной, могут быть очень короткими.

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

Я надеюсь на что-то вроде максимальной высоты, так что если будет получена действительно высокая портретная фотография, поскольку она пропорционально масштабируется, высота, достигшая максимума, ограничит ширину.

мой текущий код: 

.container {
  display: flex;
}

.column1,
.column2 {
  margin: 10px;
  flex-direction: column;
}

.column1 {
  width: 300px;
}

.column2 {
  width: 300px;
  justify-content: flex-end;
  display: flex;
}

#img {
  width: 100%;
}

p,
h4 {
  margin: 5px;
}

.container {
  justify-content: center;
  padding-top: 50px;
  margin: 0 auto;
}
<div class="container">
  <div id="art" class="img column1">
    <img src="image.jpg">
  </div>
  <div id="text" class="comment column2">
    <p>text</p>
  </div>
</div>

1 Ответ

0 голосов
/ 04 декабря 2018

Я думаю, что вы хотите изменить размер изображения в зависимости от высоты текста в следующем столбце.После решения:

  • Переместите изображение из потока и позвольте тексту определить общую высоту
  • Используйте относительное-абсолютное позиционирование для увеличения размера изображения

Минимальный пример: 

.container {
  display: flex;
}
.column1,
.column2 {
  width: 300px;
}

.image-wrapper {
  position: relative;
}
.image-wrapper-inner {
  /* expands as much as its parent */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image-wrapper img {
  /* percentage width and height will now work */
  max-width: 100%;
  max-height: 100%;
  /* use your favorite centering trick */
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<body>
  <div class="container">
    <div class="column1 image-wrapper">
      <div class="image-wrapper-inner">
        <img src="https://dummyimage.com/600x400/FC0/000">
      </div>
    </div>
    <div class="column2">
      <textarea rows="4">Resize this text area to see how image resizes itself</textarea>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...