如何通过CSS根据页面方向显示不同的图片？

通过CSS可以根据页面方向显示不同的图片。具体实现方法如下：

首先，需要使用CSS的媒体查询（Media Queries）来检测页面的方向。媒体查询可以根据不同的条件来应用不同的CSS样式。
在媒体查询中，可以使用orientation属性来检测页面的方向。该属性有两个可能的值：portrait表示纵向（竖屏）方向，landscape表示横向（横屏）方向。
在媒体查询中，可以使用background-image属性来设置不同方向下的背景图片。可以为不同方向分别指定不同的图片路径。

下面是一个示例代码：

/* 默认样式 */
.image {
  background-image: url(default.jpg);
}

/* 纵向方向样式 */
@media (orientation: portrait) {
  .image {
    background-image: url(portrait.jpg);
  }
}

/* 横向方向样式 */
@media (orientation: landscape) {
  .image {
    background-image: url(landscape.jpg);
  }
}

在上述示例中，.image类表示一个具有背景图片的元素。默认情况下，使用default.jpg作为背景图片。当页面方向为纵向时，使用portrait.jpg作为背景图片；当页面方向为横向时，使用landscape.jpg作为背景图片。

这样，根据页面的方向，不同的背景图片将会被应用到相应的元素上。

腾讯云相关产品和产品介绍链接地址：