レスポンシブデザインで
画像をスマホで画面いっぱいに表示しようと
CSSを以下で設定しています。
img {
width: 100%;
max-width: 100%;
height: auto;
}
他の画像ははこれで大丈夫なのですが、 空間を開ける透過gifは
異様に長い隙間になってしまいます。
<img src="http://marichihair.com/wp-content/themes/sample/ … height="10" /></div>
height="10"はPC用に必要なので入れました。

スマホだけdisplay none でどうにかやっていますが、うまく適度な隙間を
作るようにはできないでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (1件)

古い IE がサポート切れになったことですし、


space.gif を使わずに
margin とか padding とか flex とかで調整してはいかがでしょうか
    • good
    • 0
この回答へのお礼

Ogre7077さん
そうですか、使わないほうがいいですか
 ありがとうございます。

お礼日時:2017/04/20 21:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qbackground-imageにmax-width:100%;height:auto;を適用したい

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100%;
height:auto;
}
とすると、(font-size:10px;で適用確認)すると、画面を越えてしまって半分ぐらいしか文字が入っていません、拡大されているのかどうかわかりませんが、max-widthが効かないようです。

何が原因でしょうか?
教えて下さい。
宜しくお願い致します。

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100...続きを読む

Aベストアンサー

背景にはそんなプロパティ有りません。coverプロパティを使う。

Q「imgタグのwidthとheight」とリンクされている実際の画像の幅と高さが違うものを検出したい

たとえば<img src="sample.jpg" width="100" height="100">と書かれているが
実際のsample.jpgの幅と高さが99pxのように違うものを検出したい。

※Dreamweaverのデザインビューで画像をクリックして、プロパティの幅と高さを
調べるというのは画像がたくさんあると手間がかかるのでほかの方法を探しています。

ご存知の方がおられましたらご回答をよろしくお願いします。

Aベストアンサー

http://search.vector.co.jp/search?query=img+width+height&x=0&y=0
vectorので img width height を検索した結果。
こういったソフトを使うと、自動で処理してくれるのかも。
(試したわけじゃないので使い勝手とかわかりませんが)

Q←これをCSSでやりたい

製作しているサイトに小さい画像が沢山あります。
今までは<img src="00.gif" border="0">と普通に書いていたんですが、
なにせ画像の数が多いのでいちいち記述すると見直す際に見にくくて邪魔なんです。

この部分のborder="0"をCSSで記述し 、一括で各イメージのボーダーを0pxにする方法って何かありますか?

もちろんborder="5"と記述したらボーダーが5pxになります。

以上宜しく教えて下さい。

Aベストアンサー

img {border: none; }

Qで出る枠

を消すにはどうしたらいいのでしょうか?

Aベストアンサー

<a><img src="x.gif" border="0"></a>
で大丈夫だとおもいます。

Q:hover imgとimg:hoverの違いは?

下記CSSの違いを教えてください
.test:hover img {}
.test img:hover {}

Aベストアンサー

.test:hover img {}
testクラスの領域にマウスが入っているときのtestクラス内のimgに対するスタイル
※マウスがtestクラス内であってimgの外でもimgに対してスタイルが適用されます。

.test img:hover {}
testクラス内のimg内にマウスが入っているときのimgに対するスタイル


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報