2015-08-07 19 views
2

Изображение имеет ширину 400x400 в зависимости от свойства изображения. Теперь у меня есть видео, которое должно иметь одинаковую ширину и высоту изображения. Как я могу наследовать ширину и высоту изображения свойство видеотегаКак наследовать ширину и высоту изображения до тега видео

HTML:

<div id="holder"> 
<img src="http://placehold.it/400x400" > 
<video controls=""> 
    <source src="mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
</video> 
</div> 

CSS:

#holder { 
    position: relative; 
} 

#stuff { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

http://codepen.io/snehav27/pen/mJoyPO

+1

Если ваше изображение всегда 400x400, просто добавьте 'height =" 400 "width =" 400 "' в тег видео. –

+0

Вы пробовали использовать JavaScript? – Xufox

+0

Во-первых, тег '' ДОЛЖЕН самозакрываться, например '' второй, если вы знаете размеры, можете ли вы не просто статически установить их в css? – WookieCoder

ответ

2

очередь вещи в классе, а затем положить Div класс = "материал" вокруг видео

#holder { 
    position: absolute; 
height:400px; 
width:auto; 
} 

.stuff { 
    position: absolute; 
    height:inherit; 
    width:inherit; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.stuff video{position:absolute; 
      height:inherit; 
      width:inherit; 
      vertical-align:top;} 
+0

Можете ли вы проверить ручку кода, решение не работает .http: //codepen.io/snehav27/pen/MwxYpZ – user2936008

+0

см. отредактированный ответ –

+0

http://codepen.io/anon/pen/jPJEyp –

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