尝试找出一种方法,使竖屏和横屏图片根据最大高度和最大宽度的情况自适应视口大小。只要宽度不超过1050像素,图像就应该保持100%的宽度。另一个限制是图像最多应为800像素高。所以先遇到哪个“真实”条件,就应该限制图像的大小。如果我设置
max-width: 1050px
和max-height: 800px;
,那么图像的纵横比就会被破坏(如下面的演示所示)。还有一个问题是图像的宽度将比实际图像更宽(836像素宽的竖屏图像会缩放到1050像素)。这是否可能仅使用CSS控制?演示