0

レスポンシブでなければならないモバイル電子メール テンプレート (javascript がないことを意味します) を作成しています。

画面が狭くなるにつれて縮小されるいくつかの画像をインラインで配置したい。css table と table-cell を使用してこれを行い、画像を拡大縮小しました。今のところ問題ありません。

ただし、画像は電子メール クライアントによってブロックされることが多いため、画像が読み込まれていないときに画像の「代替テキスト」を表示する、一種の灰色のプレースホルダーを作成するように依頼されました。このプレースホルダーを、含まれている画像と同じサイズにし、幅を狭くして拡大縮小したいと考えています。

次のフィドルでわかるように、私はかなり遠くまで行きました: http://jsfiddle.net/ow7c5uLh/29/

HTML:

<div class="table">
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
</div>

CSS:

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-cell {
    display: table-cell;
    text-align: center;
    padding: 0 5px;
    border: 1px dotted black;
}

.placeholder {
    max-width: 120px;
    max-height: 60px;
    margin: auto;
    background-color: #505050;
    color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
}

ただし、次の 2 つの問題があります。

  1. 画面が狭くなり、画像がスケーリングされると、背景色が画像の下から飛び出します。placeholder-div は画像と同じようにスケーリングされますが、その高さは (ブラウザーによって) 画像の高さよりも 5 ピクセル大きくなるように計算されます。その違いはどこから来るのですか？
  2. 画像がロードされていない場合 (画像の URL を無効にしてフィドルを試してください)、placeholder-div の高さが崩れます。正しい高さを保つにはどうすればよいですか？

参考までに、実際に使用される画像は常に同じサイズであるとは限りませんが、サイズがわかり、縦横比を計算できます。これらの値 (120px など) を、例のように個別の css ファイルではなく、インラインで書き込みます。

助けてくれてありがとう！

4

2 に答える 2

0

display: blockCSSルールに追加してimg、インラインではなくブロック要素にすると、準備完了です: Fiddle

そのうちの 1 つの src="...." をフィドルで src="" に変更すると、セル自体が既にスケーリングされていることがわかります。

img[alt] { font-size: 2vw; overflow: hidden }CSS にルールを追加すると、htmlalt="text"もスケーリングされます。が 120x60px より大きい場合、overflow: hidden余分なテキストを切り捨てます。alt

(注: [alt]CSS では「属性」と呼ばれます。独自の属性を作成するには、「css カスタム属性」を検索してください。)

更新されたフィドルを見る

の幅と高さのルールを緩めないようにアドバイスしplaceholderますが、少なくとも何かが「欠けている」ことを示すために min-height/min-width に変更できます。またはに変更しmax-width: 100%て削除max-heightしますが、これは要件によって異なります。画像のサイズを線の上または下のどこかで制限する必要があります (たとえば、テーブルの幅をpxで指定し、その子に (最大) 幅を%で指定します)。

于 2015-11-19T12:58:26.500 に答える