Масштабирование объекта в отзывчивом дизайне

Question

То, что я пытаюсь сделать, - сделать масштаб объекта в окне браузера. Когда я увеличиваю браузер, объект просто перемещается прямо вверх, а не просто остается в том же положении и масштабируется с помощью браузера. Видео, которое у меня есть на весах, просто отлично, это объект на вершине, с которым у меня проблемы. Если у кого-то есть предложения, которые действительно помогут. Спасибо!

Вот JsFiddle, но я не уверен, насколько это будет полезно.

https://jsfiddle.net/tad1jcxt/

HTML:

<figure class="stayssame"> 
<video controls loop poster="placeholder.png" autoplay> 
<source src="video.mp4" type="video/mp4"> 
<!-- <source src="movie.ogg" type="video/ogg">--> 
Your browser does not support the video tag. 
</video> 
<h1 id="headline">Intermediate Web Design: 
<br> 
Fun, Insightful, Experience 
</h1> 
<object type="image/svg+xml" data="comweb2.svg" ></object> 
</figure> 

CSS:

object{ 
top:8.5%; 
left:32%; 
height: 100px; 
width:200px; 
} 

#headline{ 
text-align: center; 
position: absolute; 

top:10%; 
left:35%; 
color:#00E3FF; 
line-height:20px; 
font-family: 'Orbitron', sans-serif; 
word-spacing: 1px; 
font-size:12px; 

} 

Answer 1

Желаемое положение экрана вашего < объекта > (содержащий графику) составляет 8,5% от высоты экрана от сверху и 32% ширины экрана с левой стороны. Однако свойства CSS top и left применимы только к абсолютно позиционированным элементам; например, position: fixed или position: absolute. Поэтому просто добавьте position: absolute к вашим свойствам CSS для объекта < >, и вам хорошо идти.

 object{ 
     position: absolute; 
     top:8.5%; 
     left:32%; 
     height: 100px; 
     width:200px; 
    } 

Я также настоятельно рекомендую вам не изменить глобальное определение в < объекта > элемента в данном случае, потому что кажется очень специфичны для данного экземпляра. Лучше всего, чтобы дать вашему < объект > атрибут ID, а затем использовать это, чтобы придать ему свойства CSS желательно:

<style> 
    #logo{ 
     position: absolute; 
     top:8.5%; 
     left:32%; 
     height: 100px; 
     width:200px; 
    } 
</style> 
<object id="logo" type="image/svg+xml" data="comweb2.svg" ></object> 

---

Для справки:

https://developer.mozilla.org/en-US/docs/Web/CSS/left

https://developer.mozilla.org/en-US/docs/Web/CSS/top