[分享]css中怎么把图片变成横的

CSS是我们网页界面中常用的样式语言，在开发中，有时我们可能希望把一张图片变成横着的。那么下面就来看看CSS中怎么实现吧。 img { transform: rotate(90deg); / 使用tr...

CSS是我们网页界面中常用的样式语言，在开发中，有时我们可能希望把一张图片变成横着的。那么下面就来看看CSS中怎么实现吧。

<img src="vertical-image.jpg" alt="vertical-image" style="display: none;">
<style>
    img {
        transform: rotate(-90deg); /* 使用transform属性旋转90度 */
        display: block;
        margin: 0 auto;
    }
</style>
<img src="vertical-image.jpg" alt="horizontal-image"> 

代码中我们先将原始的竖直图片隐藏起来，再通过使用CSS的transform属性进行旋转，将其变成横向的图片。同时为了使图片居中显示，我们设置了display:block和margin:0 auto。

最后，为了展示效果，我们又在代码中加入了横向图片的引用，从而使整个页面呈现出来的是横向的图片。