Skip to content

Instantly share code, notes, and snippets.

@QETHAN

QETHAN/jsbin.wohugeju.css

Created July 26, 2014 08:36
Show Gist options
  • Save QETHAN/09da806bacde6304d256 to your computer and use it in GitHub Desktop.
Save QETHAN/09da806bacde6304d256 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.wohugeju.css
img{
max-width: 100%;
vertical-align: top;
height: auto;
width: auto;
}
.type{
max-width: 50em;
margin: auto;
background-color: #fff;
padding: 2em 1em 5em;
}
body{
font-size: 16px;
}
footer{
margin-top: 20px;
}
Raw
jsbin.wohugeju.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, minimal-ui">
<link rel="stylesheet" href="http://g.tbcdn.cn/thx/cube/1.2.1/cube-min.css">
<link rel="stylesheet" href="http://g.tbcdn.cn/thx/cube/1.2.1/type-min.css">
<title>响应式图片——艺术指导 by 一丝</title>
</head>
<body>
<div class="type">
<h1>响应式图片——艺术指导</h1>
<blockquote>基于服务端自动生成需要的图片。</blockquote>
<h2>原始图片</h2>
<img src="http://gtms02.alicdn.com/tps/i2/TB10WQ3FFXXXXX1aXXXCtjtIVXX-570-400.jpg" alt="MM">
<h2>调整大小</h2>
<img alt="MM" src="http://trial.resrc.it/S=W300/http://gtms02.alicdn.com/tps/i2/TB10WQ3FFXXXXX1aXXXCtjtIVXX-570-400.jpg" class="resrc">
<h2>艺术裁剪</h2>
<img alt="MM" src="http://trial.resrc.it/C=W230,H260,XOF98,YOF2/http://gtms02.alicdn.com/tps/i2/TB10WQ3FFXXXXX1aXXXCtjtIVXX-570-400.jpg" class="resrc">
<h2>水平裁剪+水平翻转</h2>
<img alt="MM" src="http://trial.resrc.it/C=W230,H400,XOF98/r=h/http://gtms02.alicdn.com/tps/i2/TB10WQ3FFXXXXX1aXXXCtjtIVXX-570-400.jpg" class="resrc">
<h2>大小+灰度</h2>
<img alt="MM" src="http://trial.resrc.it/s=W260/e=g/http://gtms02.alicdn.com/tps/i2/TB10WQ3FFXXXXX1aXXXCtjtIVXX-570-400.jpg" class="resrc">
<footer>服务端由<a href="http://resrc.it">resrc.it</a>提供支持</footer>
</div>
<script>
resrc = {
options: {
server: "trial.resrc.it"
}
};
</script>
<script src="//use.resrc.it"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment