css中怎么把图片横过来

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

使用CSS中如何将图片横放在很多网页当中,经常会为了美观和排版的需要而需要将图片横向放置。这种操作用CSS来实现是非常容易的,下面就让我们一起来看看具体的实现方法。首先,让我们看看下面这个例子:如果我

使用CSS中如何将图片横放
在很多网页当中,经常会为了美观和排版的需要而需要将图片横向放置。这种操作用CSS来实现是非常容易的,下面就让我们一起来看看具体的实现方法。
首先,让我们看看下面这个例子:

如果我们需要将这个图片横向放置,首先需要将其变成块级元素。方法是给其添加 display: block; 属性。这样,图片就变成了一个块级元素,我们才能对其进行更多的样式设置。
然后,我们需要将其宽度设置为 100% 或者 一个固定的宽度值,这样图片就能横向放置了。
接下来,我们需要设置其高度为 auto,让其能够根据宽度自适应高度,这样图片才能真正变成横向排列的。
最后,我们可以使用 transform 属性来将图片旋转 90 度,这样就可以实现图片的横向排列了。
下面是具体的代码示例:
img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(90deg);
} 

以上就是将图片横放的完整代码示例,非常简单易懂。如果你也需要将图片横向排列,赶快试试这个方法吧!

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么把图片横过来

粉丝

0

关注

0

收藏

0

已有0次打赏