Тег ответьте (высота) на изображение внутри него

Я вообще новичок в откликающем веб-дизайне и пытаюсь создать шаблон видео-сайта. Когда я делаю волновой график отзывчивым в теге div, ширина отлично работает. Однако высота оставляет зазор между изображением (как если бы высота не отвечала базой на ширину) и тегом div и отображала красный цвет фона для div 'wave1'.Тег ответьте (высота) на изображение внутри него

Вы можете увидеть его здесь на jsFiddle на любом размере экрана.

Любая идея, как исправить это ???

Вот мой код:

<div id="wave1"> 
    <img src="images/wave1.jpg" alt="wave 1"> 
</div><!--wave1--> 

#wave1 { 
    background-color:#C31619; 
    width: 100%; 
    height: inherit; 
    padding: 0; 
    margin: 0; 
} 

#wave1 img { 
    width: 100% 
}

источник

2015-05-11 Richard Clifford

что вы пытаетесь избавиться от своей скрипки? Я не могу сказать, в чем проблема ... – DrCord

Не могли бы вы быть более конкретными в том, что именно здесь происходит неправильно? Или, может быть, что вы пытаетесь произойти (каков ваш желаемый конечный результат)? – ajmajmajma

Кроме того, вы должны закрыть тег : ' wave 1 ' –

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

(Demo)

#wave1 { 
    background-color: #C31619; 
    width: 100%; 
    height: inherit; 
    padding: 0; 
    margin: 0; 
    font-size: 0; 
} 
#wave1 * { 
    font-size: 1rem; 
}

источник

2015-05-11 18:16:24

Это сработало отлично !!! Спасибо! –

-1

Разрыв между красной нижней частью волны DIV и видео вызвано проклейкой на ваши «внешних» делах. У вас есть:

.outer { 
    padding-top: 1%; 
... 
}

Для снятия зазора удалите эту прокладку.

https://jsfiddle.net/oxn6zLar/

источник

2015-05-11 18:16:10

Ах, на самом деле не совсем понятно. Я предполагаю, что красный просто иллюстрирует проблему. –

я играл с этим какое-то время сейчас и буквально не вижу причины, почему это происходит.

Предоставление

#wave1 { margin-bottom:-4px; }

работы, , но, конечно, не самое лучшее исправление как зазор не вызвано отрывом и может просто разорвать снова в будущем.

источник

2015-05-11 18:20:48 Matt

Эй, я сказал то же самое. Никогда не сталкивался с этим вопросом раньше; ваш ответ был для меня чем-то новым! Я бы проголосовал за это, но мне не хватает репутации. – Matt

Я рад, что я ответил вам, потому что вы совсем не претенциозны. – Matt

Следовательно, почему я заявил, что это не лучшее решение. Я просто предоставил временное решение; и зачислил ваш собственный ответ. – Matt

-1

height: inherit линия не требуется.

попробуйте добавить display: block в ваш img's css.

Значение по умолчанию для HTML-тегов HTML является встроенным, что означает, что изображение визуализируется в строке с текстом и присваивается значение line-height, что приводит к появлению пустого пространства под изображением (из-за разницы между высотой изображения и высоту линии).

Другим обходным решением было бы установить vertical-align: bottom на элемент img, чтобы разница между высотой линии и высотой изображения была поверх изображения.

источник

2015-05-11 18:25:19 Imashcha

Тег ответьте (высота) на изображение внутри него

ответ

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