Ширина дочернего изображения не меняет ширину родительского изображения - PullRequest
Новая
       10

Ширина дочернего изображения не меняет ширину родительского изображения

0 голосов
/ 05 июля 2018

У меня есть изображение, вложенное в серию <div> тегов. У меня есть изображения в height: 100%; и width: auto;. Когда я изменяю высоту моего браузера, изображение меняет свой размер, но каким-то образом родительский div не изменяется в IE и Edge (хорошо для всех других браузеров).

Вот нормальный рендер на Chrome при изменении размера браузера:

Here is the normal render on chrome when you resize your browser

Вот проблема в IE при изменении размера:

Here is the problem in IE when you resize

Или вот так:

Or like this

Я пытаюсь изменить размер родительского элемента в зависимости от ширины изображения. Размер родительского контейнера просто не изменяется. Вот моя <div> структура: 

body,
html {
  margin: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
}

#photo-gallery {
  position: relative;
  height: 100%;
  padding: 100px;
  box-sizing: border-box;
}

.project {
  position: relative;
  display: inline-block;
  height: 100%;
  max-height: 600px;
  border: solid 18px #333;
  box-sizing: border-box;
}

img {
  height: 100%;
  box-sizing: border-box;
}
<div id="photo-gallery">
  <div class="project">
    <img src="img/landscape1.jpg">
  </div>
</div>

Вот мой CodePen (открытый в IE или Edge)

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

...