- ベストアンサー
１０ｃｍある画像を左から３ｃｍのみ表示させるにはど
<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; }
お礼
ご回答ありがとうございます。
お礼
ご回答ありがとうございます。