画像を指定範囲内でリサイズさせずに原寸部分表示

質問

画像を指定範囲内でリサイズさせずに原寸部分表示させたいのですが、どうすれば良いでしょうか？

■前提
・画像サイズ … 1000×1000
・指定範囲 … 200×200
※指定範囲サイズは固定だが、画像サイズは変動可能性あり

■やりたいこと
・200×200範囲で、画像を原寸のまま表示したい
・収まりきらないので画像の一部分表示になるが、それでOK
・可能なら、どの範囲の部分を表示させるか指定したい(左上とか)

■希望
・CSSで実装したい
・難しければ、JSでもOK

回答No.2

ORUKA1951 · ベストアンサー

面白そう(^^)
本当に様々な方法がありますが、文書構造=HTMLが示されていませんので、されたいことがわかりません。

　例えば、機器の説明などで画像があったとして、それぞれの部分を200×200で表示したいということでしょうか？
・背景画像としてbackground-positionを使用する。
　HTML側には画像は一切記入せずCSS側で可能。
・画像自体をスタイルシートでサイズや位置を指定する。
・他にも文書構造に合わせて色々な手法があります。

　例えば２番目の例ですが
　img要素は置換インライン要素ですのでwidth,height共にautoで本来のサイズになります。それを利用します。
　それを囲むブロックにposition:relative;とoverflow:hidden;を指定して画像自体はrelativeで任意の位置に移動させると、期待通りになるはずです。

＞可能なら、どの範囲の部分を表示させるか指定したい(左上とか)
　contentプロパティで属性値を指定するのが楽です。content:attr(title)とか・・
　そうすれば、HTML側でのメンテナンスだけですみます。

【重要】
　HTMLがきちんと文書構造をマークアップできていればドウにでもなります。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
[サンプル]
画像はライセンスの関係もありWikiの物を使用しています。
☆リキッドですから親画像はウィンドウ幅に合わせて伸縮します。
★タブは＿に置換してあるので戻す。
★http:はhttp：に置換してあるので戻す。
詳細画像はここではWiki画像を使用していますが、適当な画像でも良いです。contentでオリジナル画像を追加すればすむ事ですから・・

(HTML)
<ul class="sample">
＿<li>
＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
＿＿ width="501" height="" alt="268" style="">
＿＿<ol>
＿＿＿<li>ヘタ
＿＿＿＿<p title="左上"><img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
＿＿＿＿ width="121" height="" alt="54" style="left:-180px;top:-60px;"></p>
＿＿＿</li>
＿＿＿<li>表面
＿＿＿＿<p title="中央少し左"><img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
＿＿＿＿ width="121" height="" alt="54" style="left:-190px;top:-200px;"></li></p>
＿＿＿<li>種
＿＿＿＿<p title="左中央"><img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Sundown_and_cross_section_2.jpg/1024px-Sundown_and_cross_section_2.jpg"
＿＿＿＿ width="121" height="" alt="54" style="left:-640px;top:-240px;"></li></p>
＿＿</ol>
＿</li>
</ul>
(CSS)
ul.sample,ul.sample li,ul.sample ol{display:block;margin:0;padding:0;list-style:none;}
ul.sample{width:70%;margin:0 auto;position:relative;}
ul.sample li img{width:100%;height:auto;}
ul.sample ol li{display:inline-block;width:200px;}
ul.sample ol li p{width:200px; height:200px;overflow:hidden;position:relative;}
ul.sample ol li img{width:auto;height:auto;position:relative;}
ul.sample ol li p:after{content:attr(title);position:absolute;top:5px;left:5px;background-color:white;padding:3px;}

お礼

回答ありがとうございましたー

回答No.1

hitomura

つ http://www.htmq.com/style/clip.shtml

お礼

回答ありがとうございましたー