Неправильный размер гибкого ребенка с изображением - PullRequest
Новая
       19

Неправильный размер гибкого ребенка с изображением

2 голосов
/ 22 мая 2019

У меня похожий случай в моем проекте: 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .wrapper {
      display: flex;
      width: 600px;
      height: 300px;
    }

    .container {
      display: flex;
      width: 100%;
    }

    img {
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600">
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>

У меня есть контейнер фиксированной ширины (.container), который устанавливает высоту своих дочерних элементов так, чтобы она соответствовала его собственной высоте (из-за align-items: stretch; по умолчанию).В одном из этих контейнеров у меня есть изображение (<img>), которое я хочу иметь ту же высоту, что и его родитель (.image-wrapper), сохраняя при этом пропорции.В демоверсии это происходит, но ширина .image-wrapper не обновляется.По крайней мере, не всегда ...

Иногда изображение выглядит так ( неверно ):

incorrect sizing

... а иногда это выглядит так ( правильно ):

enter image description here

Я думаю, что это связано сбраузер не обновляет ширину .image-wrapper.В неправильном сценарии он имеет ширину 200 (исходный размер изображения-заполнителя), но после изменения размера изображения до 100x300 (из-за его height: 100% и его родителя 300px при естественном размере200x600) ширина родительского элемента не обновляется, чтобы отразить это.Он должен измениться с 200 на 100, теперь размер изображения теперь изменен.

Одна странность в том, что если размер неправильный и вы добавляете width: 100% к .image-wrapper в инспекторе, а затем удаляетеего ширина обновляется и теперь отображается правильно.

Если вы загрузите фрагмент и откроете его в браузере, вы должны видеть, что изображение отображается неправильно, пока вы не откроете DevTools и не отключите кэш.После этого (поскольку загрузка изображения занимает некоторое время, я полагаю), ширина устанавливается правильно при обновлении.

Это происходит в последних версиях Chrome, Firefox и IE11 в Windows 10. Вот скрипка тоже.

Почему это происходит?Как это исправить?

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Похоже, это известная ошибка в Chrome, но, к моему замешательству, я также испытываю это и в Firefox ...

Для этого есть 2 решения:

1) 

img{
  height: 100%;
  width: 100px; /* Set a specific width to your image */
}

2) Очевидно, что удаление image-wrapper div также решает эту проблему немедленно. 

.wrapper {
  display: flex; 
  flex-flow: row nowrap;
  flex-basis: 600px;
  height: 600px;
}

.container {
  display: flex;
  height: 300px;
}

img {
 height: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
         <img src="https://placehold.co/200x600">
         <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>
0 голосов
/ 22 мая 2019

Это может произойти, если вы не укажете явно размер изображения; в частности, это известная ошибка в Chrome .

Вы можете либо:

  1. Укажите это в атрибуте HTML width или в свойстве CSS width: 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .wrapper {
      display: flex;
      width: 600px;
      height: 300px;
    }

    .container {
      display: flex;
      width: 100%;
    }

    img {
      height: 100%;
      width: 100px; /* 1st solution: you should use fixed width when using CSS */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600" width="100"> <!-- 2nd solution -->
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>
  1. Используйте JavaScript, чтобы установить для атрибута ширины HTML фактический размер изображения во время выполнения: 

// Give your image a proper ID
window.addEventListener('load', function () {
  var img = document.getElementById('img');

  // This sets the image's HTML width element
  // Notice the self-assignment
  img.width = img.width;
})
.wrapper {
  display: flex;
  width: 600px;
  height: 300px;
}

.container {
  display: flex;
  width: 100%;
}

img {
  height: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600" id='img' />
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...