私はスライドショーにテキストを入力してフォントのサイズを反応させようとしています。私が達成しようとしているものにかなり類似しているレスポンシブなフォントサイズを作成するには
How to create responsive text on top of an image?
:私はこの質問を見つけました。私はそれに取り組んでいて、フォントサイズとラインの高さのパーセンテージを利用していますが、何もしていないようです。これまでのところ私のコードは次のようになります。
HTML:
<div>
<div>
<div class="ec_slideshow">
<ul class="bxslider"> <!--slideshow that I found on the interwebz-->
<li><div class="ec_slidecontainer">
<img src="http://enviroptics.com/Matt/Transparent%20photos%20in%20progress/Vision_System_Flow_Cell_1200x400.png" alt=""/>
<!--This is the text that I want to be responsive-->
<h2 class="ec_slidecontent"><span>Bubble Analysis<br/>Possible Subtext</span></h2>
<!--End of text that I want to be responsive-->
</div></li>
</ul>
CSS:このページで起こって他のHTML要素とCSSやJSのものがあります
.ec_slideshow {
width: auto;
max-width: 1200px;
height: auto;
border: 2px solid black;
/*background-color: cyan;*/
text-align: center;
font-size: 20px;
margin: 20px auto 0px auto;
padding-bottom: 0px;
z-index: 1 !important;
}
.ec_slidecontent span {
position: absolute !important;
top: 0px;
left: 30%;
font-family: 'roboto' !important;
font-size: 100% !important;
color: #fff !important;
padding: 3px 10px !important;
width: 40% !important;
line-height: 100% !important;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
}
.ec_slidecontent {
margin: 0px !important;
padding: 0px !important;
.ec_slidecontainer img {
position: relative;
width: 100%; /* for IE 6 */
}
ので、おそらく何かのフォント関連が他の場所から継承されているか、あるいは私が何をしているのか分かりません。いずれにしても、このページhttp://www.enviroptics.com/envirocam.htmlを見て、ウィンドウのサイズを変更して何が起こっているのかを知ることが一番簡単です。
JavaScriptを使用してjQueryを使用することはできますか? – minorcase
ツールを見て、正しい要素を実際にターゲティングしているわけではありません。開発ツールを使用すると、 'font-size'がこの' #rot#rot_ctr1_bod_ctr3_bod_wrp1 h2' – zik
@minorcaseによって上書きされていることがわかります。私はjavascriptを使うことができ、私はjQueryを最大1.11まで使えると信じています –