- ベストアンサー
１０ｃｍある画像を左から３ｃｍのみ表示させるにはど
<html> <head> <title>test</title> <style type="text/css"> img{width:500px; </style> </head> <body> <img src="http://test/line.jpg"> </body> </html> これで、画像のサイズ（割合）を調整できますが 例えば１０ｃｍある画像を左から３ｃｍのみ表示させるにはどうすればいいでしょうか？ 上記のやり方だと長さの調節はできますが それに伴い画像も縮小拡大されてしまいます。
- eorifcivtwgni
- お礼率72% (27/37)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
cmとか、長さの単位で例えるのは、ディスプレイ上や印刷物では、解像度によっていくらでも変化するので好ましくありません。画像のピクセルサイズで表しましょう。 さて、ご質問の内容ですが、imgタグだけでは出来ません。 例えば400 x 300の画像で、左から200pxまでの部分（座標0,0～199,299）の範囲を表示したいなら、 <style> div#imgContainer { position:relative; overflow:hidden; width:200px; height:300px; border:1px solid blue; padding:0px; } div#imgContainer img{ position:relative; left:0px; top:0px; width:400px; height:300px; border:0px; padding:0px; margin:0px; } </style> <div id="imgContainer"> <img src="xxx.jpg"> </div> と言うように、レイアウトコンテナ（div）の中にイメージ（width:400px height:300px）を表示して、レイアウトコンテナのサイズを実際に表示するサイズ（width:200px height:300px）に合わせ、はみ出した部分を非表示（overflow:hidden）にする事で実現します。 この際、レイアウトコンテナとイメージの間には、それぞれのpaddingとイメージのmargin、枠線（boder）が存在するので、レイアウトに合わせそれぞれ調整します。
その他の回答 (2)
stylesheetに、 img{ pssition:*****; top:***px; left:***px; } を指定されるといいのでは？・・・ css sprite画像を使うときの基本ですね！。
お礼
ご回答ありがとうございます。
- sanzero
- ベストアンサー率56% (58/102)
こんな感じかな。 https://jsfiddle.net/3Lhwfe4k/1/ 画像をずらしたいときはmarginを使うとよさげ .crop > img { margin-left: -109px; }
お礼
ご回答ありがとうございます。
関連するQ&A
- 画像の別ウィンドでの拡大表示をやりたいが・・・
Ｋｏｏｔｓｕｋｉと申します。 初めて質問させていただきます。 javascriptを勉強しはじめたものです。 ブログで画像の別ウィンドでの拡大表示をやりたくjavascriptでfunctionを定義しました。しかし、エラーになってしまいうまくいきません。どなたか原因を教えていただけないでしょうか。 まずhtmlは以下です。 <img src="http://...AAAAs.jpg" onclick="largeImage(this)"> 次にfunctionの定義は以下です。 ブログ上のサムネール画像をクリックしたときには、lergeImageで900×675のウィンドゥを開き、そこにオリジナル画像を100%縮小(?)で表示します。同時に画面の左上に拡大マーク画像を表示し、そこがクリックされたら同じウィンドゥを使って縮小なしで再表示しようと思っています。しかし、拡大マーク画像をクリックすると、ランタイムエラー：行番号0で「オブジェクトを指定してください」とランタイムエラーになってしまいます。どこがおかしいのでしょうか。よろしくお願いします。 <script type="text/javascript"> <!-- var lisrc = ""; function largeImage(img){ var objImg = new Image(); objImg.src = img; var img_wh_hi = objImg.height / objImg.width; var base_wh_hi = 675 / 900; img.src.match(/^(.+)s\.([^\.]+)$/); lisrc = RegExp.$1 + "." + RegExp.$2; newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" width="100%" onClick="window.close()"alt="クリックするとウィンドゥを閉じます。"><img src="http://blog-imgs-19.fc2.com/....../kakudai.jpg" onClick="maxImage()" alt="さらに拡大" style="position:absolute; top:10px; left:150px; z-index=2"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } function maxImage(){ newWin = window.open("","","top=10,left=10,width=900,height=675,scrollbars=yes").document; newWin.open(); newWin.write('<html><head><title>拡大画像<\/title><style type="text/css"><!-- body {padding:0;margin:0;text-align:center;} #blank {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} --><\/style><\/head>'); newWin.write('<body>'); newWin.write('<p><img src="' + lisrc + '" onClick="window.close() alt="クリックするとウィンドゥを閉じます"><\/p>'); newWin.write('<\/body><\/html>'); newWin.close(); } // --> </script>
- ベストアンサー
- JavaScript
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- 画像を一杯に表示できない
PCでもスマホでも画像を幅一杯に表示させたいです。全画面表示ではありません。できればCSSファイルは別途作成せず、１つのHTMLファイルですませたいです。そこで以下のソースを書きましたが、画像x.jpgのサイズが、画面の大きさを変えても、変わりません <head> <style type="text/css"> img.example1 { width: 100%; height:auto; } </style> </head> <body> <div align="left"> <table width="100%" align="left" bgcolor="#FFFFFF"> <tr> <td width="100%"> <p><img src="x.jpg" alt="x" "class="example1"> </p> </img> </td> どうしたら良いでしょうか？
- 締切済み
- CSS
- IEとFirefoxの表示の違い
テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。 外部スタイルシートに以下を記載して、 body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } 以下のHTMLをブラウザで表示すると、枠が重なって表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html> そこで、 スタイルシートのdiv.boxに height:100% ; を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。 画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- cssで画像を中央に表示する方法
http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように２つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか？
- 締切済み
- CSS
- XHTML+CSS 画像を中心（上下の）に配置したい
基本部分と思うのですが、下記の記述でどうしても中心にならず、躓いております。 「中心にしたい画像」を800pxの枠内の中央（上下）に置きたい為、 上下の余白を19pxとっているのですが、画像が下寄りになってしまいます。 動作確認はMac：safari3.0 Fire Fox2.0 です。 どなたか教えて下さい。よろしくお願い致します。 ------------------------- 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <style type="text/css" media="all"> <!-- @import url("test.css"); --> </style> </head> <body> <div id="navi"> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> </div> </body> </html> ------------------------- 【CSS】 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; margin: 0px; float: left; }
- ベストアンサー
- HTML
- CSSのliタグで画像との間に空白ができてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS</title> <style type="text/css"> <!-- li { margin:0px; padding:0px; list-style-type:none; } --> </style> </head> <body> <ul> <li><img src="aaa.gif"></li> <li><img src="bbb.gif"></li> <li><img src="ccc.gif"></li> </ul> </body> </html> こんな感じのソースですけど、画像と画像の間に空白（2pxくらい）が できてしまいます。 画像と画像をくっつけたいのですがどうすればいいでしょうか？ 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- 締切済み
- HTML
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。