在響應式設計中縮放對象

我想要完成的是使我的對象與我的瀏覽器窗口進行比例縮放。當我增加瀏覽器時，對象只是直接向上移動，而不是停留在相同的位置並使用瀏覽器進行縮放。我有這個對象的視頻很好，這是我遇到問題的最頂層的對象。如果任何人有任何建議，真的會有所幫助。謝謝！在響應式設計中縮放對象

這是一個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

在響應式設計中縮放對象

回答

相關問題