Как установить высоту детей по абсолютной позиции родителя - PullRequest
Новая
       20

Как установить высоту детей по абсолютной позиции родителя

0 голосов
/ 10 февраля 2019

У меня проблема с тем, как сделать размер дочернего элемента следующим за родителем.Случай ниже.

HTML 

<div class="video">

  <div class="spot">
    <img src="..." alt="">
    <button>x</button>
  </div>

</div>

CSS 

.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  position: absolute;
  max-height: 30px;
  top: 0;
  left: 0;
  display: table;
  margin: 0;
  max-width: 100%;
  /* width: 16%;  only height can affect image on content*/
}

.spot img {
  width: 100%;
  height: 100%;
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}

Я хочу, чтобы изображение соответствовало высоте пятна.Потому что, если я установлю ширину (любого размера), изображение будет следовать ширине пятна.Кто-нибудь знает, как это сделать?

Я также создаю jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Ваше изображение уже соответствует вашему .spot росту.Проверьте границу на spot.Или ты имеешь ввиду переполнение?Или вы хотите, чтобы ваш .spot следовал за вашим .video? 

console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  border: red 2px solid;
  position: absolute;
  height: 40%;
  /*width: 20%;*/
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.spot img {
  /*width: 150%;*/
  height: 100%;  
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">

  <div class="spot">
    <img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
    <button>x</button>
  </div>

</div>
0 голосов
/ 10 февраля 2019

Вы установили max-width вместо width.max-width не установит width на заданное значение, оно просто предотвратит превышение width заданного значения. 

.spot {
  position: absolute;
  height: 30px;
  top: 0;
  left: 0;
  display: table;
  margin: 0;
  width: 100%;
}
...