thumb截中间区域

dabblet.css

/* thumb截中间区域 */


fieldset {
  display: inline-block;
  border: 1px solid #ddd;
}

.thumb {
  position: relative;
  width: 200px;
  height: 150px;
  overflow: hidden;
  font-size:0;
  white-space: nowrap;
  border: 1px dotted;
  margin-bottom: 50px;
}

.thumb img{
  width: 200px
}

.thumb-inner {
  position: absolute;
  top: -200%;
  bottom: -200%;
  left:-200%;
  right: -200%;

  _width: 500%; /* -(200 * 2 + 100)%*/
  _height: 500%;
  _margin: -200% 0 0 -200%;
 
  text-align: center;
}

.thumb-inner img{
  vertical-align: middle;
}

.valign {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  overflow: hidden;
}

dabblet.html

<div class="thumb">
<div class="thumb-inner1">
<img src="http://img01.taobaocdn.com/imgextra/i1/13556028817687646/T1bBOwFddXXXXXXXXX_!!52323556-0-tstar.jpg_620x10000.jpg">
<i class="valign"></i>
</div>
</div>

<fieldset>
<legend>截图大小:</legend>
<button onclick="document.querySelector('.thumb-inner1').className='thumb-inner';">优化</button>
<button onclick="document.querySelector('.thumb').style.cssText='width:100px;height:100px;';document.querySelector('.thumb img').style.cssText='width:100px;';">100x100</button>
<button onclick="document.querySelector('.thumb').style.cssText='width:200px;height:200px;';document.querySelector('.thumb img').style.cssText='width:200px;';">200x200</button>
<button onclick="document.querySelector('.thumb').style.cssText='width:200px;height:300px;';document.querySelector('.thumb img').style.cssText='width:200px;';">200x300</button>
<button onclick="document.querySelector('.thumb').style.cssText='width:300px;height:200px;';document.querySelector('.thumb img').style.cssText='width:300px;';">300x200</button>
</fieldset>

<fieldset>
<legend>图片大小:</legend>
<button onclick="document.querySelector('img').src='http://dummyimage.com/200x300';">200x300</button>
<button onclick="document.querySelector('img').src='http://dummyimage.com/400x400';">400x400</button>
<button onclick="document.querySelector('img').src='http://dummyimage.com/300x800';">300x800</button>
<button onclick="document.querySelector('img').src='http://dummyimage.com/100x100';">100x100</button>
</fieldset>

dabblet.js

// alert('Hello world!');

settings.json

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