1

Bootstrap 2 を使用して、映画ポータルのレスポンシブ デザインを作成しています。

画像の高さを他の写真と同じ高さにしたい。写真の高さを手動で設定すると、美しく見え、すべての写真が他の写真と同じ高さになります。

しかし、タブレットで Web サイトを開くと、すべての画像が圧縮されているように見えます。

例 1:

ここに画像の説明を入力

写真から高さを削除すると、写真は他の写真と同じレベルになく、見栄えが悪くなります。

例 2:

ここに画像の説明を入力

多分あなたはそれを修正する方法を知っていますか？

HTML:

<div class="span2 item all">
   <div class="picframe img-polaroid">
      <span class="overlay">
      <span class="info-area">
      <a class="img-icon-url" href="/movie"></a>
      </span>
      <span class="pf_text">
      <span class="project-name">Movie Name</span>
      <span>Genre</span>
      </span>
      </span>    
      <img data-original="pictur.jpg" src="picture.jpg" alt="" class="poster"/>
   </div>
</div>

CSS:

.poster {
   width:170px;
   height:226px;
}
4

1 に答える 1

0

レスポンシブ イメージを作成するのは非常に簡単なので、Bootstrap 3 を使用することもできます。

レスポンシブ画像

<img src="..." class="img-responsive" alt="Responsive image">
于 2013-11-04T11:54:20.863 に答える