css将图片横着放

CSS 可以帮助我们控制网页中的图像，包括它们的位置和大小。如果您想让图片横着放，CSS 同样可以帮助您实现这个目标。

让我们来看看下面的示例，我们将利用 CSS 将图片横向放置：

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
    

在上面的代码中，我们使用了display: block; 使图片成为块级元素，并将其居中显示，而max-width: 100%; 和height: auto; 可以将图片的宽度自适应屏幕大小。

如果您想要将图片横向放置，只需再添加以下代码：

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    transform: rotate(90deg);
}
    

通过添加transform: rotate(90deg); ，我们可以将图片旋转90度，从而横向放置。

如果您想将图片旋转回来，只需再次更改度数即可：

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    transform: rotate(-90deg);
}
    

这些简单的 CSS 代码可以帮助您实现想要的图片横向放置效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！