CSSの画像置換

質問

CSSの画像置換のため、以下の通りに書いています。

PCで見た際には画像が正常に表示されるのですが、
スマホで見た場合、widthが625pxで指定してあるのではみ出してしまうのです。
これを100%等にすると画像が欠けてしまいます。
この場合はどの様にするべきでしょうか？
宜しくお願いします。

.txtint {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.txt_btm30 {
font-size: 105%;
letter-spacing: 0.05em;
line-height: 170%;
margin: 10px 0 30px;
width: 100%;
}

<p class="txtint txt_btm30" style="background: url('***.gif') no-repeat; width:625px; height:118px">テキスト</p>

回答No.3

神崎 渉瑠（@taloo）

viewportのwidthを625pxにしてみてはいかがでしょうか。

回答No.2

ORUKA1951

高度なことするには基礎が大事です。
老婆心ですが
　class="txtint txt_btm30"
　　なんてclass名はつけないほうが良いですよ。数年後にあなたが、あるいは他人がメンテナンスする時に分からなくなります。
　class="logo top"とかだと分かりやすいです。googleのclass名は理解しようとしています。だって『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』なのですから。

　それはさておき、スマホやモダンブラウザ対応でしたら、background-size:が使えます。
例えば、それが
<div class="footer">
　<p class="Logo">テキスト</p>
とそのHTMLのfooter内にあるなら
div.footer p.Logo{
　　text-indent: 100%;
　　white-space: pre;
　　overflow: hidden;
　　margin: 10px 0 30px;
　　width: 100%;
　　background:
　　url('***.gif');
　 height:118px;
　　background-size:100% 100%;
}

・HTMLのstyle属性に記述すると詳細度は[1,0,0,0]になってしまいます。一切外部スタイルシートで上書きできなくなります。
・文書構造さえしっかり書かれていたら、デザインのためのclassなんて不要です。
　上の場合は詳細度は[0,0,2,2]になりますよね。
　このセレクタや詳細度というカスケーディングの仕組みは、CSS(カスケーディングスタイルシート)の根幹です。それを活用しないと!!!
　プロパティなんかより先に覚えなきゃ。
　.classMName{}なんて書き方は、*.classNameの略で、本来は基点となるセレクタを書くべき。

お礼

ありがとうございました。

回答No.1

metametamu

img要素でマークアップする方が適してないですか？
モバイルデバイスではCSSを切り替えて画像を非表示にしたいとかならわかりますが、SEOの効果も皆無ですよ・・・。

とりあえずやるとすれば画像を2種類作ってcssのメディアクエリで切り替えるとかどうでしょうか。