竖向展示图片的技巧
横图竖向展示的问题
在设计网页或者制作宣传图时，我们经常会遇到一种问题——横向的图片在竖向的页面上展示不美观，而且导致图片的视觉冲突。这给我们的视觉感受带来了很大的困扰。
当然，如果是直接将横图拉长变形，这会严重破坏图片的美观度。为了解决这一问题，我们需要学会一些技巧。
解决方案一：利用旋转工具
将横图以90度的角度旋转，这样就可以实现竖向展示，同时不会损坏图片的美观度。但是，这种方法有其局限性，只适合于图片内容不会因为旋转而失真的情况。
另外，要注意旋转后的图片大小是否符合需求。如果自适应就可以，如果需要裁剪一下就更好了。
解决方案二：使用CSS转换
CSS3提供了一种非常方便的解决方式——transform属性。使用transform:rotate(90deg)即可实现竖向展示的效果。同时，还可以控制元素的大小、位置等。
另外，如果需要更多的效果，可以通过CSS3的translate属性来制定元素放置的位置，同时也可以指明元素的大小。
需要注意的是，此方法不适用于部分低版本的浏览器，故要进行层次标记设计。
运用这两种技巧，你就能够优雅地解决横图无法竖向展示的问题了。当然，如果图片内容对于某种方法有局限性，或者想要更多的效果，还可以结合其他处理方法，如使用JS进行操作。
版权声明：《横图改成竖图且图不变形（竖向展示图片的技巧）》文章主要来源于网络，不代表本网站立场，不承担相关法律责任，如涉及版权问题，请发送邮件至3237157959@qq.com举报，我们会在第一时间进行处理。本文文章链接：http://www.bxwic.com/bxwzl/8969.html
