Skip to content

Instantly share code, notes, and snippets.

@kejun
Forked from anonymous/dabblet.css
Created September 5, 2013 03:06
Show Gist options
  • Save kejun/6445584 to your computer and use it in GitHub Desktop.
Save kejun/6445584 to your computer and use it in GitHub Desktop.
thumb截中间区域
/* 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;
}
<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>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment