Flex контейнеры и большая ширина изображения внутри предмета - PullRequest
Новая
       1

Flex контейнеры и большая ширина изображения внутри предмета

0 голосов
/ 08 октября 2019

У меня очень странная проблема с масштабированием изображений внутри гибкого контейнера.

Это мой гибкий контейнер: 

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg">
  </div>
</div>

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

Если я установлю изображение на средне-большую ширину с помощью width="100000", изображение по-прежнему масштабируется правильно, избегая переполнения. 

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="100000">
  </div>
</div>

Теперь, если я установлю изображение на очень большую ширину с width="10000000000000", изображение слегка переполнится: 

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="10000000000000">
  </div>
</div>

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

Почему это происходит? Есть способ это исправить? Спасибо.

Ответы [ 2 ]

1 голос
/ 08 октября 2019

Я думаю, вы также можете установить width:100% на .scaleimages img, чтобы предотвратить большие размеры и, таким образом, контролировать размер с вашим контейнером. 

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  width: 100%;
  max-height: 1000px;
}

.scaleimages {
  width: 500px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="1000000000000000000000">
  </div>
</div>
0 голосов
/ 08 октября 2019

Вы всегда можете зафиксировать размер тега изображения, он не будет перетекать на его родительский

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <style>
    .flex {
      display: flex;
      background-color: red;
    }
    
    .scaleimages img {
      min-height: 200px;
      max-height: 200px;
      min-width: 200px;
      max-width: 200px;
    }
  </style>
  <div class="flex">
    <div class="item1">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="item2 scaleimages">
      <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="10000000000000">
    </div>
  </div>
</body>

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

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

...