1

幅の設定には問題はありませんが、縦長の画像をアップロードすると面倒に見えます.すべての画像の幅と高さを同じにしたいのですが、画像を維持すると見栄えがよくなります(伸びたり圧迫されたりしません)。タイムラインのFacebookの写真プロフィールのように、

それは私の問題です: https://d8e7ec01-a-62cb3a1a-s-sites.googlegroups.com/site/vanyfiles/1-horz.jpg

私のHTMLコード:

<table>
   <tr>
      <td id="thumb_img">
         <img src="images/e-magz.png" width="100%" height="100%"/>
      </td>
      <td id="thumb_news">
         <div id="date">February 7,2013</div>
         <a href="#">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh</a>
      </td>
   </tr>
</table>

私のCSSコード:

#thumb_news{
   padding: 5px;
}

#thumb_img{
   width: 25%;
   height: 100px;
   overflow: hidden;
   left: 0;
   right: 0;
   padding-right: 5px;
}
4

2 に答える 2

1

画像用に別のラッパーを作成して、必要な幅と高さを定義する必要があります:) imgにheight = 100％がないことを忘れないでください:D削除するだけです

HTML

` 

  <td id="thumb_img">
      <div class="wrap_img">         
          <img src="http://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/1463202_599544233439021_1446517358_n.jpg"  width="100%"/>
      </div>
  </td>
  <td id="thumb_news">
     <div id="date">February 7,2013</div>
     <a href="#">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh</a>
  </td>

`

CSS

.wrap_img{ display:block; width:100px; height:100px; overflow: hidden; }

これをチェックしてくださいhttp://jsfiddle.net/a9un9hari/svbSG/

于 2013-11-11T05:02:06.017 に答える
0

編集

以下の情報は、DIV を使用しているがテーブルには使用していない場合に役立ちます

タグにinline がありwidth="100%ます。これは、画像を含むの幅と高さになるように強制していますが、それはあなたが望むものではありません。height="100%<img>div

幅だけを残してみてください。CSS に入れることもできます。たとえば、次のようになります。

.thumb_img img {
  width: 100%;
}

高さはそれ自体を整理します。あなたはすでにoverflow:をDIVに隠しています。

.thumb_imgnot#thumb_imgを使用していたことに注意して<td CLASS="thumb_img">ください<td ID="thumb_img">。親指をやっている場合は、複数のことをやっている可能性があります。また、CSS ID はページ上の 1 つの要素にのみ使用する必要があります。

テーブル用

Stack Overflow のこの回答にtable-layout: fixedよると、これを機能させるには、テーブルと TABLE 要素に幅を設定する必要があります。

可能であれば、このような状況では DIV を使用することをお勧めします。さまざまなレイアウトのニーズに柔軟に対応できるからです。

于 2013-11-11T04:54:41.673 に答える