Относительный div-контейнер должен иметь высоту абсолютного img внутри него

<div id="mainPic" style="width:50%;"> 
    <img id="pic1" src="#" width="100%"> 
    <img id="pic2" src="#" width="100%"> 
</div>

У меня есть два изображения внутри div # mainPic, который имеет 50% ширину его родителя. Изображения будут использовать полную ширину не более не менее и автомасштабировать высоту. Теперь mainPic должен иметь такую же высоту, как изображения. Проблема в том, что я должен установить абсолютные изображения, потому что хочу один над другим. Так как есть правила:Относительный div-контейнер должен иметь высоту абсолютного img внутри него

position : absolute; 
top : 0px; 
left : 0px;

Но теперь ДИВ # mainPic не dynamicaly, имеющие высоту от autoscaled изображений. Javascript также отсутствует, потому что JS устанавливает высоту только один раз не каждый раз, когда вы изменяете размер окна.

источник

2016-07-13 MisterRecursion

Зачем вам 2 изображения друг на друга? У вас всегда есть только 2 изображения? Являются ли 2 изображения одинаковыми? Я могу думать об относительно легко исправить, но сначала мне нужно понять это лучше. – Jayx

@Jayx Я хочу сделать вид Diashow. Один pic медленно получает непрозрачность нуля, поэтому другой снимок ниже, чтобы видеть. И снова и снова. – MisterRecursion

Абсолютное позиционирование устанавливает положение элемента относительно первого нестатического родительского элемента. Вероятно, вы не установили позицию #mainPic, которая ставит ее значение по умолчанию. Это означает, что если вы измените положение дочерних элементов #pic1 и #pic2 на абсолютное, то им будет присвоена абсолютная позиция относительно body. Это можно просто решить, предоставив нестатическое положение #mainPic. Пример скрипта: https://jsfiddle.net/thinker3197/n4kn2wLa/

источник

2016-07-13 21:35:31

Ну, я установил положение относительно. Но моя проблема не в том, чтобы позиционировать #mainPic, но pic1 и pic2, потому что я хочу, чтобы они были выше других. Я могу сделать это, предоставив им абсолютную позицию. Проблема #mainPic имеет границу, и поэтому вы можете видеть, что #mainPic не имеет автоматически высоту двух фото. – MisterRecursion

Вычислите высоту и установите ее динамически с помощью js - 'var picHeight = $ ('# pic1'). высота(); $ ('# mainPic'). Css ('height', picHeight); ' –

Относительный div-контейнер должен иметь высоту абсолютного img внутри него

ответ

Смежные вопросы