面白そう(^^)
本当に様々な方法がありますが、文書構造=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;}
お礼
回答ありがとうございましたー