テーブル内の反応的なイメージ

ニュースレターを作成する必要があり、会社はテーブルのみを必要としません。また、ブラウザ間で互換性がなければなりません。 SOは、そのようなものを使用したり、表示したり、反応しやすいフォントを使用することはできません。すべてのCSSはインラインでなければなりません。テーブル内の反応的なイメージ

いくつかのセルでは、3つの画像が必要です。それぞれに1つずつ、同じサイズが完全に一列に並んでいます。それらは、細胞の大きさに応答して、tdの100％を占める必要があります。

ブラウザがサイズを変更すると、画像が別のサイズから異なるという問題があります。例：ブラウザの幅が変更されると、Pic1の幅は150pxになりますが、Pic2は152pxになります。 Pic3は151pxになります。

これを防ぐ方法はありますか？

私が言っていることの少しの例です。画像が同じ大きさを持って、彼らはまだ別のものを異なる。（あなたが本当に何を参照してください傾けるように、もちろん、それらの画像は、ローカルに保存されている。ただ、コードのアイデアを与えるためにここに掲示する。）

<!DOCTYPE html> 
<html> 
<head> 
    <title>Table Test</title> 
</head> 
<body> 
    <table cellspacing=0 cellpadding=0 style=" width:80%; "> 

     <tr> 
      <td style="border: 2px solid #000;"> 
       <img style=" width: 100%; display:block" src="1.png"> 
      </td > 
      <td style="border: 2px solid #000;"> 
       <img style=" width: 100%; display:block" src="2.png"> 
      </td > 
      <td style="border: 2px solid #000;"> 
       <img style=" width: 100%; display:block" src="1.png"> 
      </td> 
     </tr> 

    </table> 
</body> 
</html>

私を助けることができる人のために事前に感謝します。 ;）

出典

2016-11-22 rbossan

テーブルは、ページデザインのための表形式のデータではないために意図されているのimgためにこのクラスを追加してみてください。 divを使用できないのはなぜですか？ – mlegg

ほとんどの電子メールクライアントはdivをあまりうまく扱っていません。だから、これは私が働いている会社がニュースレターであるので、テーブルを使いたいと思っています。 – rbossan

は

.img-responsive 
{ 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

出典

2016-11-23 03:15:05

私の雇用主は、この問題について少し柔軟になっています。そうする必要はありません。しかし、助けをありがとう;） – rbossan

テーブル内の反応的なイメージ

答えて

関連する問題