7

作成中の Web サイト用にレスポンシブ CSS をいくつかまとめています。CSS を使用して、画像を画像ではなく代替テキストとして強制的にレンダリングできるかどうか知りたいです。共同スポンサーのロゴを表示していますが、サイズが可変であるため、レスポンシブ デザインに自信を持って適合させることは困難です。そのため、会社名を代替テキストとして保存し、代わりにレンダリングしたいと考えています。もちろん、名前を別の要素に配置し、CSS を使用して可視性を切り替えることもできますが、代替テキストを使用すると DRYer に見えます。

4

3 に答える 3

7

それを代替テキストではなくデータ属性に保存してから、次のようにすることができます。

<span class='responsive' data-alt='foo'>
    <img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>

@media only screen and (max-width: 300px) {
    .responsive:before {
        content: attr(data-alt);
    }
    .responsive img {
        display: none;
    }
}

imgCSS とタグだけでこれを行うことができない理由は、imgタグが置き換えられた要素であるため:beforeです。

これを考慮した別のアプローチは次のとおりです。

<span class='responsive'>foo</span>

.responsive {
    background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
    text-indent: -9999em;
    overflow: hidden;
    width: 180px;
    height: 180px;
    display: block;
}

@media only screen and (max-width: 300px) {
    .responsive {
        background-image: none;
        text-indent: initial;
        overflow: initial;
    }
}

あなたが私に尋ねると、私は2番目のアプローチがもっと好きです。

于 2013-03-06T17:48:27.093 に答える
0

一緒に行きました：

<div class="cobranding">
    <span>Brought to you by</span>
    <span class="sponsor">Joe Shmoe Inc.</span>
    <img src="img/graphics/joe_shmoe_logo.jpg">
</div>

CSS を使用して、レスポンシブ ブレークポイントに基づいて img または「スポンサー」の可視性を切り替えます。

ニコのアプローチはどちらも良さそうです。唯一の問題は、これらの共同スポンサーのロゴが CMS を介して追加されることです。そのため、ケースバイケースの CSS (:before または background-image) を含むソリューションから離れたいと考えています。時間の都合上、上記の 2 要素戦略を進めました。

于 2013-03-06T18:20:50.197 に答える