HTML中，怎样将图片旋转90度显示_随笔

1 图片的旋转实现方式有很多，比如js实现，现在比较简单的方法是使用css3里面的；transform属性来实现，很方便的。其实这个题目很简单，在百度里面搜索一下css3旋转就看到了，里面的手册介绍的很清楚，下面是代码以及显示效果都呈现出来；

2 下面是写的一个实例代码，代码可以直接运行。代码的解释有备注哦；总共代码呢其实没有几行，主要就是 transform属性的应用代码中的90deg就是90度的意思

<!DOCTYPEhtml>

<html>

<head>

<style>

body{margin:0pxpadding:0px}

/*{transform就是专门为img图片设置的旋转*/

#img1{transform:rotate(90deg)border:1pxsolidred}

</style>

</head>

<body>

<imgid="img1"src="38.png"/>/*页面中显示的图片*/

</body>

</html>

3代码在浏览器的运行效果图：

关于 wkhtmltox ，是一个可以把HTML转换为图片和pdf的工具。

不多介绍了，详见官网 https://wkhtmltopdf.org/

有时候为了让程序可以执行这个命令，可能需要配置环境变量

如果网页上的中文，转成图片后变成乱码方块，请安装相关字体 :)

执行 wkhtmltoimage www.bing.com bing.png ，就会在当前目录下生成了一张png图片。

这个命令还可以增加一些参数，比如常用的设置宽高，图片质量等参数

执行 wkhtmltoimage --crop-w 410 --width 410 --quality 50 www.bing.com bing2.png 看看

说明:

还有更多参数用法，请 wkhtmltoimage -h 查看。

HTML转pdf同理， wkhtmltopdf -h 。

欢迎分享，转载请注明来源：内存溢出

HTML中，怎样将图片旋转90度显示