4

Twitter のフレームワークを使用して独自のサイトを開発しようとしていますが、ブラウザのサイズが小さくなると画像のサイズを変更したいと考えています。私は混乱していて、すべてを試しましたが、解決策を思い付くことができませんでした ここに私の構造があります

HTML

<section id="intro">
      <div class="row" id="ruby">
        <div class="span6" id="heading">
          <h1>Journey Into Ruby and Beyond</h1>
          <p>A blog about my journey into ruby, my experiences and lots of fun!</p>
        </div>

        <div class="span6" id="pic" align="right">
           <p>Akash Soti<br>RoR Developer<br>@xyz company </p>
        </div>
    </section><!--/intro-->

CSS

#ruby.row{

margin-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

#pic{

background: url(img/Akash.png);
background-repeat: no-repeat;
height: 150px;
width: 200px;
margin-left: 200px;

}

#pic img{

max-width:100% ;
    max-height:100% ;
    display:block;

}

#pic p{
position: relative;
right: 110px;
margin-top: 90px;
margin-left: 0px;
text-align: left;
}
4

2 に答える 2

9

Twitter ブートストラップは、コンテンツ内の画像である画像 (およびレイアウト) をレスポンシブにするように設計されています。

<img src="path/to/images.jpg" alt="some">

CSS で背景画像として使用した画像ではありません。

于 2012-08-08T13:34:47.460 に答える
1

使用する必要があります

@media (max-width: 699px) {
#pic{
background: url(img/Akash.png);
background-repeat: no-repeat;
height: 100px;
width: 150px;
margin-left: 200px;
}
}

ただし、レスポンシブ デザインが必要な場合は、ピクセルを避け、% を使用してください。また、背景が画像 (例: 写真、写真) であり、背景の種類の画像ではない場合は、<img>代わりに使用します

于 2012-08-08T13:35:36.937 に答える