CSS -如果屏幕是横向的，如何设置图像的最大高度；如果是纵向的，如何设置最大宽度？

在CSS中，可以使用媒体查询（Media Query）来根据屏幕方向设置图像的最大高度或最大宽度。

如果屏幕是横向的，可以使用以下CSS代码来设置图像的最大高度：

@media (orientation: landscape) {
  img {
    max-height: 100%;
  }
}

上述代码中，@media (orientation: landscape)表示当屏幕方向为横向时，应用下面的样式。img选择器选择所有的图像元素，max-height: 100%将图像的最大高度设置为屏幕高度的百分之百，即图像将自动缩放以适应屏幕高度。

如果屏幕是纵向的，可以使用以下CSS代码来设置图像的最大宽度：

@media (orientation: portrait) {
  img {
    max-width: 100%;
  }
}

上述代码中，@media (orientation: portrait)表示当屏幕方向为纵向时，应用下面的样式。img选择器选择所有的图像元素，max-width: 100%将图像的最大宽度设置为屏幕宽度的百分之百，即图像将自动缩放以适应屏幕宽度。

这样，无论屏幕是横向还是纵向，都可以根据屏幕方向设置图像的最大高度或最大宽度，以实现自适应的效果。

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

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云