如何在纵向和横向图像的基础上改变图像css的宽度

Question

在框中实施徽标，如果图像为纵向或方形，宽度应为100％，如果图像为横向，则宽度应为自动。

Answer 1

您可以使用媒体查询

@media (orientation: landscape) {
  img {
    width: auto;
  }
}

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

希望这可以帮助你。

<强>样本

@media (orientation: landscape) {
  img {
    width: auto;
  }
}

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

<img src="https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg">