- 締切済み
imgタグのmax-widthについて
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
なぜ、縦横両方を設定出来ないのか分かりませんが、 何か条件付きなのでしょうか・・・ 片方だけなら領域に対して画像を 100%で指定する方が良いかも。 safariでダメな環境があるような・・・
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
widthだけを指定、、、のことでしょうか？ <img src="image.jpg" alt="" width="10"> heightだけを指定すると、そのheightに合わせてwidthが調整されます。 <img src="image.jpg" alt="" height="20"> <img src="image.jpg" alt="" height="13"> スタイルシートのmax-widthやmax-heightはやったことがありませんが、たぶんブラウザ依存な気がします。
補足
width属性やheight属性はどちらか一方を指定すればもう片方は調整されるのですが、画像サイズが固定ではないので、どちらを指定するかを判断しなければなりません(下参照)。この判断する処理を省いてmax-widthを使用して実現できるかどうかを教えてもらいたいです。 例）画像サイズ40×30 表示領域 20×10 heigthのみを指定 例）画像サイズ80×30 表示領域 20×10 widthのみを指定
関連するQ&A
- max-widthを指定した場合の縦サイズのリサイズ方法
画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS （Movable Type）でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか？宜しくお願いします。
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- ワードプレス max-width100%が効かない
ワードプレスでレスポンシブデザインを作ろうと思っているのですが、 画像の大きさを変えるために、cssに img{max-width:100%;} を指定しているのですが、ウィンドウサイズを変えても画像の大きさが変わらず困っています。 cssの指定は効いています。max-widthの部分だけ効いていません。 何が原因なのでしょうか？よろしくお願いします。
- 締切済み
- CSS
- IE6でmax-width:100px; max-height:100pxを実現にするには
BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。 画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。 しかしmax/min-height/widthはIE6に対応しません。 そこで▼以下の２つを試してみました。 ・max-width in Internet Explorer（IE独自のexpressionを利用） http://www.svendtofte.com/code/max_width_in_ie/ ・minmax.js module（Java Scriptを利用） http://doxdesk.com/software/js/minmax.html ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px（縦長の画像は100px×100pxに）またはwidth:100px; max-height:100px（横長の画像は100px×100pxに）となってしまいます。 Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- IMGタグごとにCSSを設定する方法
自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない（編集できない）状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか？最低限の希望は、大きい画像（160px*140px）をひとかたまり、サムネイル画像（32px*30px）をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML＋JavaScript＋CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- widthとmax-widthについて。。。
cssについて、困っています。アドバイスを何卒宜しくお願い致します。 widthとmax-widthですが、あまり理解できていません。。 可変式にブラウザウィンドウのサイズを変更しても思うように画像要素が小さくなっていくようにして作っているのですが、どこにmax-widthで％指定し、どの場合はwidthで%指定するのか、または両方指定するのかが把握できておらず、 最終的に形にはなり、完全にレスポンシブ化できるのですが、このままではいつか痛い目にあうだろうなと思い調べたりしているのですが解決に至らずご質問いたしました。ご教示いただければ幸いです。 何卒どうか宜しくお願い致します。
- ベストアンサー
- CSS
- <IMG>タグにて縦横サイズの指定の仕方
画像をアップロードさせ、ブログのプロフィール欄に画像が表示されるようなシステムを作っています。 （注※私は開発側で、ブログ利用者としての質問ではありません。） アップロードされてくる画像の縦横の比率や大きさは毎回バラバラなモノがアップロードされてくると思いますが、プロフィール欄の画像枠を２００×２００pxとして、その範囲に表示画像を収めたい場合はどうすればよいのでしょうか？ 例えば <img src=xxx.jpg height=200> と指定した場合、 ２４０×４００pxの画像がアップロードされてくれば １２０×２００pxとして表示してくれますが、 ４００×２４０pxの画像がアップロードされてきてしまうと 横幅が２００ピクセル以上で表示されてしまいます。 かと言って、 <img src=xxx.jpg height=200 width=200> と指定したのでは ２４０×４００pxの画像の場合、横広がりの引き伸ばし画像で、おデブちゃんみたくで表示されてしまいます。 どなたか解決策ご存知でしたらご教示宜しくお願いします！ <IMG>タグでは無くCSSでの方法でも大歓迎です！
- ベストアンサー
- HTML
- <img>タグCSS使用時及び未使用時の表記の違い？
<img>タグにスタイルシートを使用した場合と使用しない場合の表記の違いに関する質問です。 スタイルシートを使用しない場合： <img src="example.jpg" width="100" height="150" border="0"> 上記の設定をスタイルシートを使用して行なおうとする場合、下記の記載でよいのでしょうか？ スタイルシートを使用した場合： .abc { width:100px; height:150px; border:0px; } <img class="abc" src="example.jpg"> また、この場合.abcの中のスタイルの指定にdisplay:block;は必要ないのでしょうか（<img>タグをわざわざブロックレベル要素に変換する必要はないのでしょうか？）? よろしくお願いします。
- ベストアンサー
- HTML
- <img>タグにCSSのclass設定可能？
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか？ 例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。 <table border="4" width="250"> <tr> <td align="left"> <img src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。 質問1： ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します（ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。）。スタイルシートの指定は、<head></head>内で行なうことにします。 この場合、以下のように<img>タグの中に直接classを設定できますか？できない場合は、その理由、正しいやり方等をお教え下さい。 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <img class="abc" src="example.jpg" width="100" height="100" borde="0"> </td> </tr> </table> やはり、<div></div>で<img>タグを囲んで、 <head> <style type="text/css"> .abc{ text-align:center; margin-top:10px; margin-bottom:10px: } </style> </head> <table border="4" width="250"> <tr> <td align="left"> <div class="abc"> <img src="example.jpg" width="100" height="100" borde="0"> </div> </td> </tr> </table> などとするしか方法がないのでしょうか？ 質問2： また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
補足
縦横両方を指定すると縦横比が崩れるためwidthとheightの両方を指定しない方法を探しています。IEで。