thumb截中间区域

dabblet.css

/* thumb截中间区域 */

body {
  text-align: center;
}

.thumb {
  position: relative;
  width: 20em;
  margin:2em auto;
  height: 15em;
  overflow: hidden;
}

.thumb img{
  position: absolute;
  width: 100%;
  margin: auto;
}

#corp-top:checked ~ .thumb img {
  left: 0;
}

#corp-mid:checked ~ .thumb img {
  left: -1000em;
  right: -1000em;
  bottom: -1000em;
  top: -1000em;
}


#corp-bot:checked ~ .thumb img {
  left: -1000em;
  right: -1000em;
  bottom: 0;
  top: auto;
}

dabblet.html

<input type="radio" name="pos" id="corp-top" checked><label for="corp-top">截上</label>
<input type="radio" name="pos" id="corp-mid"><label for="corp-mid">截中</label>
<input type="radio" name="pos" id="corp-bot"><label for="corp-bot">截下</label>
<p>(不支持ie6/7)
<div class="thumb thumb-top">
<img src="http://img01.taobaocdn.com/imgextra/i1/13556028817687646/T1bBOwFddXXXXXXXXX_!!52323556-0-tstar.jpg_620x10000.jpg">
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}