在响应式设计中缩放对象

我想要完成的是使我的对象与我的浏览器窗口进行比例缩放。当我增加浏览器时，对象只是直接向上移动，而不是停留在相同的位置并使用浏览器进行缩放。我有这个对象的视频很好，这是我遇到问题的最顶层的对象。如果任何人有任何建议，真的会有所帮助。谢谢！在响应式设计中缩放对象

这是一个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; 

}

来源

2016-11-18 Cakers

请创建一个代码段，而不是仅发布代码。 – connexo

@connexo我添加了一个JsFiddle是你想要的吗？ – Cakers

请让自己熟悉SO文本编辑器授予的选项。 – connexo

您<对象>（含有图形）的所希望的画面位置是从屏幕高度的8.5％顶部和屏幕左侧32％的宽度。但是，top和left CSS属性仅适用于绝对定位的元素;例如，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

来源

2016-11-18 19:43:49 unrivaledcreations

在响应式设计中缩放对象

回答

相关问题